Card Components - Corrupted Theme

Basic Cards

Standard

Card Title

This is a basic card component with standard glass morphism effects. Perfect for general content.

Learn more

Small

Compact Card

A smaller card variant with reduced padding, ideal for dense layouts.

Large

Featured Card

A larger card with more breathing room, great for highlighting important content or promotions.

<div class="card">
  <h3>Card Title</h3>
  <p>Card content goes here...</p>
  <a href="#">Learn more</a>
</div>

<!-- Small variant -->
<div class="card" style="padding: var(--spacing-md);">...</div>

<!-- Large variant -->
<div class="card" style="padding: var(--spacing-xl);">...</div>
      

Cards with Images

Image Header

Article Title

A card with an image header. Great for blog posts, articles, and content showcases.

Nov 23, 2025 Author

Icon Badge

Feature Card

Cards with icon badges for highlighting features or benefits.

Image + Overlay

Video Content

Cards can display media with overlay effects.

<div class="card card-with-image">
  <div class="card-image">
    <i class="fas fa-image"></i>
  </div>
  <div class="card-content">
    <h3>Title</h3>
    <p>Description...</p>
  </div>
</div>
      

Testimonial Cards

Testimonial

"

This theme is absolutely amazing! The attention to detail and thoughtful design made it so easy to use.

JD

Jane Doe

Designer

With Rating

"

Best design system I've used. Highly recommended for any project!

JW

John Wilson

Developer

Multiple Reviews

245 reviews

"Amazing quality and support. Exactly what I was looking for!"

<div class="testimonial-card">
  <div class="quote-mark">"</div>
  <div class="testimonial-text">Great product!</div>
  <div class="testimonial-author">
    <div class="author-avatar">JD</div>
    <div class="author-info">
      <div class="author-name">Jane Doe</div>
      <div class="author-title">Designer</div>
    </div>
  </div>
</div>
      

Stat Cards

Simple Stat

2.5M

Users

With Icon

99.9%

Uptime

With Progress

Completion

75% Complete

<div class="card stat-card">
  <div class="stat-number">2.5M</div>
  <div class="stat-label">Users</div>
</div>

<div class="card">
  <div style="font-size: 3rem; color: var(--accent);">
    <i class="fas fa-rocket"></i>
  </div>
  <div style="font-size: 2rem; color: var(--accent);">99.9%</div>
  <div>Uptime</div>
</div>
      

Product Cards

Product

Product Name

Sale Product

$59.99

$41.99

Coming Soon

Upcoming Product

Available soon! Notify me when this product launches.

Coming Soon

<div class="card card-with-image">
  <div class="card-image">...</div>
  <div class="card-content">
    <h3>Product Name</h3>
    <p>Description...</p>
    <div class="card-meta">
      <span><strong>$29.99</strong></span>
      <span>Rating</span>
    </div>
    <div class="card-footer">
      <button class="btn btn-sm">Add to Cart</button>
    </div>
  </div>
</div>
      

Frosted Glass Cards

Frosted Glass

Enhanced glass effect with stronger blur and opacity for premium feel.

Secure & Safe

All data encrypted and protected.

Lightning Fast

Optimized for speed and performance.

<div class="frosted-card">
  <h3>Title</h3>
  <p>Content...</p>
</div>
      