display contract
Card
Grouped surface for related content. Most common composition primitive.
Variants
- default
- background.elevated + radius.lg + elevation1
- outlined
- 1px border, no shadow
- interactive
- Whole card is a link/button; press feedback + hover lift
- inset
- fill.tertiary background — sub-surfaces inside another card
Sizes
- compact
- padding-4 (16pt)
- default
- padding-5 (20pt)
- spacious
- padding-6 (24pt)
Slots
- header
- CardTitle + optional CardDescription + actions
- media
- Optional image / video at the top
- content
- Main body
- footer
- Actions or metadata at the bottom
Example
<Card><CardHeader><CardTitle>Plan</CardTitle></CardHeader><CardContent>...</CardContent></Card>Usage rule
Interactive cards use `role="button"` and Enter/Space activation, plus hover/active feedback.
The full Card contract has 4 more rules, plus the do-not patterns. Get the full recipe.