display contract
Card
Grouped surface for related content. Most common composition primitive.
Variants
- default
- outlined
- interactive
- inset
Sizes
- compact
- default
- spacious
Slots
- header
- media
- content
- footer
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.