CSS Card Component: 18 Modern Examples With Code (2026)

The CSS card component is the most versatile building block in modern UI design. From product listings to profile grids and bento layouts, cards organize information into scannable, interactive units. This guide delivers 18 production-ready CSS card examples — every design style used in 2026, with full copy-paste code.

TL;DR: Jump to any example using the H3 headings. Every card includes complete HTML + CSS, hover states, and accessibility considerations.

What Is a CSS Card Component?

A CSS card component is a self-contained UI element that groups related content — image, title, description, and actions — inside a bordered or shadowed container. Cards are used in product grids, blog post listings, team pages, dashboards, and bento grid layouts. Browse ready-built card components in the ProofMatcher CSS UI components library.

CSS Card Component Examples

1. Basic Product Card

<div class="card">
  <img src="product.jpg" alt="Product name" class="card__img">
  <div class="card__body">
    <h3 class="card__title">Product Name</h3>
    <p class="card__price">$49</p>
    <button class="card__btn">Add to Cart</button>
  </div>
</div>

/* Basic product card */
.card {
  --radius: 14px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  max-width: 320px;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,0.14); }
.card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.card__body { padding: 20px; }
.card__title { font-size: 16px; font-weight: 700; margin: 0 0 6px; color: #111; }
.card__price { font-size: 22px; font-weight: 800; color: #6366f1; margin: 0 0 16px; }
.card__btn {
  width: 100%; padding: 10px; background: #6366f1; color: #fff;
  border: none; border-radius: 8px; font-weight: 600; cursor: pointer;
  transition: background 0.2s;
}
.card__btn:hover { background: #4f46e5; }

2. Glassmorphism Card

/* Glassmorphism card — use on gradient/image backgrounds */
.card-glass {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 28px;
  color: #fff;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  transition: transform 0.25s ease;
}
.card-glass:hover { transform: translateY(-4px); }

3. Dark Mode Card

/* Dark mode card */
.card-dark {
  background: #0f1117;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 24px;
  color: #f1f5f9;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.card-dark:hover {
  border-color: rgba(99,102,241,0.4);
  transform: translateY(-3px);
}

4. Profile / Team Card

/* Profile card with centered layout */
.card-profile {
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  max-width: 260px;
  transition: transform 0.25s ease;
}
.card-profile:hover { transform: translateY(-4px); }
.card-profile__avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px;
  border: 3px solid #6366f1;
}
.card-profile__name { font-size: 17px; font-weight: 700; color: #111; margin: 0 0 4px; }
.card-profile__role { font-size: 13px; color: #6b7280; margin: 0 0 20px; }
.card-profile__social { display: flex; justify-content: center; gap: 12px; }

5. Blog Post Card

/* Blog post card with category pill */
.card-blog {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform 0.25s ease;
}
.card-blog:hover { transform: translateY(-4px); }
.card-blog__category {
  display: inline-block;
  padding: 4px 12px;
  background: #eef2ff;
  color: #6366f1;
  font-size: 11px;
  font-weight: 700;
  border-radius: 9999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.card-blog__title { font-size: 17px; font-weight: 700; line-height: 1.3; color: #111; }
.card-blog__meta { font-size: 12px; color: #9ca3af; margin-top: 12px; }

6. Pricing Card

/* Pricing card — featured variant */
.card-pricing {
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  padding: 32px 28px;
  max-width: 300px;
  transition: border-color 0.2s, transform 0.2s;
}
.card-pricing.featured {
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99,102,241,0.1);
  transform: scale(1.03);
}
.card-pricing__price {
  font-size: 42px; font-weight: 900; color: #111;
}
.card-pricing__period { font-size: 14px; color: #6b7280; font-weight: 400; }
.card-pricing__features { list-style: none; padding: 0; margin: 20px 0; }
.card-pricing__features li { padding: 8px 0; font-size: 14px; color: #374151; border-bottom: 1px solid #f3f4f6; }

7. Stats / Metric Card

/* Dashboard stats card */
.card-stat {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 14px;
  padding: 24px;
  color: #fff;
  min-width: 180px;
}
.card-stat__value { font-size: 36px; font-weight: 900; line-height: 1; }
.card-stat__label { font-size: 13px; opacity: 0.8; margin-top: 6px; }
.card-stat__change { font-size: 12px; margin-top: 12px; font-weight: 600; }
.card-stat__change.up { color: #86efac; }
.card-stat__change.down { color: #fca5a5; }

8. Horizontal Card

/* Horizontal image + content layout */
.card-horizontal {
  display: flex;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  max-width: 480px;
  transition: transform 0.2s ease;
}
.card-horizontal:hover { transform: translateX(4px); }
.card-horizontal__img { width: 140px; flex-shrink: 0; object-fit: cover; }
.card-horizontal__body { padding: 20px; flex: 1; }

9. Hover Reveal Card

/* Content revealed on hover */
.card-reveal {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
}
.card-reveal__img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover; }
.card-reveal__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex; align-items: flex-end;
  padding: 20px;
  color: #fff;
}
.card-reveal:hover .card-reveal__overlay { opacity: 1; }

10. Neumorphic Card

/* Soft neumorphic card — light backgrounds only */
.card-neu {
  background: #e0e5ec;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 8px 8px 16px #b8bec7, -8px -8px 16px #ffffff;
}
.card-neu__title { font-size: 18px; font-weight: 700; color: #4a5568; }

11–18. Quick Variants

/* Bordered accent card */
.card-accent { border-left: 4px solid #6366f1; border-radius: 0 12px 12px 0; padding: 20px; background: #fff; }

/* Gradient border card */
.card-grad-border {
  background: #fff; border-radius: 14px; padding: 24px;
  position: relative;
}
.card-grad-border::before {
  content: ''; position: absolute; inset: -2px;
  background: linear-gradient(135deg, #667eea, #f093fb);
  border-radius: 16px; z-index: -1;
}

/* Bento grid card */
.card-bento { background: #111; border-radius: 20px; padding: 28px; color: #fff; }
.card-bento.span-2 { grid-column: span 2; }

/* Feature card with icon */
.card-feature { background: #f9fafb; border-radius: 14px; padding: 28px; }
.card-feature__icon { width: 48px; height: 48px; background: #eef2ff; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-size: 22px; }

/* Minimal list card */
.card-list { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 0; overflow: hidden; }
.card-list__item { padding: 16px 20px; border-bottom: 1px solid #f3f4f6; display: flex; align-items: center; gap: 12px; font-size: 14px; }
.card-list__item:last-child { border-bottom: none; }

/* Tag card */
.card-tag { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.card-tag .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.card-tag .tag { padding: 4px 10px; background: #f3f4f6; border-radius: 9999px; font-size: 12px; color: #374151; }

/* Notification card */
.card-notification { background: #fff; border-radius: 12px; padding: 16px 20px; display: flex; align-items: flex-start; gap: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); border-left: 3px solid #6366f1; }

CSS Card Component Best Practices

Use aspect-ratio on card images instead of fixed heights — maintains proportions across all screen sizes
Transition on the base state, not just hover — ensures smooth both-direction animation
Add will-change: transform only if you're animating transform on scroll — don't add it speculatively
Test keyboard navigation — if a card is clickable, it must be focusable with Tab and activatable with Enter
Use overflow: hidden on the parent card to clip child elements cleanly to the border-radius

Pro tip: For card grids, use CSS Grid with grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) — responsive without media queries.

Explore More ProofMatcher Resources

🔗 Browse CSS card components — interactive live previews
🔗 Download free website templates — built with card-based grid layouts
🔗 Explore SaaS dashboard templates — metric and stats card layouts included
🔗 Dark mode website templates — glassmorphism and dark card designs

Frequently Asked Questions

How do I make a CSS card responsive?

Use CSS Grid with auto-fill and minmax(), or Flexbox with flex-wrap: wrap. Set max-width on individual cards and let the grid distribute them naturally.

How do I add a hover effect to a CSS card?

Add transition: transform 0.25s ease, box-shadow 0.25s ease on the base card, then define .card:hover { transform: translateY(-4px); box-shadow: ... }.

What is a glassmorphism card?

A glassmorphism card uses backdrop-filter: blur() and a semi-transparent background to create a frosted glass effect. It works best placed on top of gradient or blurred image backgrounds.

What's the difference between a card and a tile?

The terms are used interchangeably. "Tile" is more common in dashboard and bento grid contexts; "card" is more common in product, blog, and profile UIs.

How do I make a card with a gradient border?

CSS can't apply gradients directly to border. The cleanest technique is the ::before pseudo-element with a gradient background, positioned behind the card with a slightly larger size (see example 12 above).

Conclusion

Mastering the CSS card component unlocks one of the most versatile UI patterns in web design. Whether building a product grid, dashboard, or bento layout, the 18 examples above cover every scenario with production-ready code.

Explore interactive examples in ProofMatcher's CSS UI components, or download a free template with card layouts already built in.

Premium Website Templates — Designer-Level UI for Modern Brands | ProofMatcher