Card

Purpose

A surface that groups related content into a bordered, elevated container. A layout primitive — it has no behavior of its own.

Anatomy

Card › CardHeader (CardTitle, CardDescription, CardAction) › CardContent › CardFooter. Use only the parts you need.

Style

No variants — one canonical surface (token --card / --card-foreground, border, radius). Compose spacing with the provided sub-parts rather than ad-hoc padding.

Behavior & functionality

Presentational container. If the whole card should be clickable, wrap it in a link or put an explicit button inside — don't attach a click handler to the card div.

Accessibility

• Give the card a heading (CardTitle) so its region is identifiable.
• A clickable card must expose a real interactive element (link/button), not just an onClick on the container.

Do / Don't

• ✅ Use the sub-parts (CardHeader/CardContent/CardFooter) for consistent spacing.
• ❌ Don't nest cards more than one level — flatten the hierarchy instead.