Card

Card Variants

Layout Variants

Size Variants

Use our Spacing Calculator to define consistent padding across card sizes.

Card Properties

Card Sub-components

Design Token Mappings

Advanced Visual Effects

Cards are the ideal canvas for advanced CSS effects:

• Gradient backgrounds: Create unique card backgrounds with our Gradient Generator
• Glassmorphism: Semi-transparent, blurred backgrounds with our Glassmorphism Generator
• Layered shadows: Multiple shadow layers create realistic depth — use the Shadow Generator

See our Design Tokens Complete Guide for token naming conventions.

Card States

Hover Animation Best Practices

For interactive cards, a subtle lift on hover creates a "picking up" metaphor:

.card-interactive {
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.card-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.card-interactive:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

Don't overdo the lift — 2–4px maximum. Larger values feel cartoon-ish. Configure these values with our Shadow Generator.

WCAG Requirements

The "Clickable Card" Problem

Making an entire card clickable is one of the trickiest accessibility challenges. Here are the approaches, ranked:

1. Nested link with ::after pseudo-element (recommended):

<article class="card" style="position: relative;">
  <h3><a href="/product/123" class="card-link">Product Name</a></h3>
  <p>Description text...</p>
  <button type="button" class="card-action" style="position: relative; z-index: 1;">
    Add to cart
  </button>
</article>

<style>
.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}
</style>

This approach makes the entire card clickable via the link's pseudo-element, while allowing other interactive elements (buttons) to remain individually clickable by stacking above via z-index.

2. Wrapping in <a> (problematic):

<!-- ❌ Avoid: nesting interactive elements inside <a> is invalid HTML -->
<a href="/product/123">
  <article class="card">
    <button>Add to cart</button> <!-- Invalid: button inside anchor -->
  </article>
</a>

3. JavaScript click handler on the card:

<!-- ⚠️ Acceptable, but requires role and keyboard handling -->
<article class="card" role="link" tabindex="0" onclick="navigate('/product/123')" onkeydown="handleEnter(event)">
  ...
</article>

Keyboard Interaction

Always test your card contrast with the Contrast Checker — especially when using gradient backgrounds, glassmorphism effects, or images with text overlays.

Do's

• ✅ Use <article> for standalone content. A blog post preview, product listing, or user profile is standalone content — semantically, it's an article.
• ✅ Include a heading in each card. Cards without headings are hard to scan and harder for screen readers to navigate. Use the appropriate heading level in context.
• ✅ Keep card heights consistent in a grid. Use align-items: stretch on the grid container, and push the footer to the bottom with margin-top: auto inside the card.
• ✅ Use image aspect ratios consistently. All cards in a grid should use the same image ratio (16:9, 4:3, 1:1). Inconsistent ratios create a ragged, unprofessional grid.
• ✅ Limit actions to 1–2 per card. A card with 5 buttons isn't a card — it's a dashboard widget that needs its own page.

Don'ts

• ❌ Don't overload cards with content. A card should be a summary, not a detail page. If you need a paragraph of text, 4 badges, 3 buttons, and a chart — use a dedicated page or an expanded view.
• ❌ Don't make the entire card clickable AND have buttons inside without handling the stacking correctly (see accessibility section). Users will accidentally trigger the wrong action.
• ❌ Don't use cards for sequential content. A list of steps is not a card grid. Use a Stepper or ordered list.
• ❌ Don't nest cards inside cards. It creates visual confusion and accessibility headaches.
• ❌ Don't use cards just for visual decoration. If the card border/shadow doesn't serve a grouping purpose, drop it and use simpler layout.

Content Guidelines

• Title: 2–8 words. Descriptive, not clickbait-y. Should make sense out of context.
• Description: 1–3 sentences maximum. The card is a preview — save the details for the detail page.
• Image: Always include alt text. If the image is decorative, use alt="".
• Actions: 1 primary action ("View", "Buy now"), 1 optional secondary ("Save", "Share"). Use icon buttons for compact card footers.

Cross-System Comparison

Notable Approaches

Material 3 formalizes three card variants with distinct use cases: Elevated (default, shadow-based), Filled (tinted background, no shadow — ideal for surfaces that already have elevation), and Outlined (bordered, flat — for when shadows would create visual noise in dense layouts). This three-variant system covers virtually every card need.

Shadcn/ui provides the most granular sub-component composition: CardHeader, CardTitle, CardDescription, CardContent, and CardFooter. Each is a simple styled <div> with Tailwind classes. This composability is flexible but means you're assembling cards from 5+ components every time.

Ant Design ships a loading prop that automatically renders a skeleton placeholder inside the card — a pragmatic feature that saves developers from building skeleton states manually. Ant also supports Card.Grid for creating gridded layouts inside a single card.

Radix has no card primitive — and shouldn't. A card is primarily a visual container, not a behavioral primitive. There's no complex interaction logic to abstract. Build your card with semantic HTML (<article>) and CSS.

Interesting trend (2025–2026): "Bento grid" layouts — cards of varying sizes arranged in an asymmetric grid — have become ubiquitous in landing pages and dashboards. CSS Grid's grid-template-areas and span make this achievable without JavaScript. Pair with our Spacing Calculator for consistent gaps.