Data display
Card
A surface that groups related content, with an optional header, actions and footer.
Live example
Default
Outlined
Groups related content.
Elevated
Adds a shadow token.
Filled
Uses the sunken surface.
Usage
<Card as="section" id="spend" title="Total spending" eyebrow="This period" actions={<IconButton ... />}>
<p>$12,400</p>
</Card>Props
| Prop | Type | Default | Description |
|---|---|---|---|
as? | 'article' | 'section' | 'div' | 'div' | section cards with an id become regions named by their title. |
title? | ReactNode | none | Card heading. |
headingLevel? | 2 | 3 | 4 | 3 | Fit the page outline. |
eyebrow? | ReactNode | none | Small label above the title. |
actions? | ReactNode | none | Header controls. |
footer? | ReactNode | none | Footer content. |
variant? | 'outlined' | 'elevated' | 'filled' | 'outlined' | Surface treatment. |
padding? | 'sm' | 'md' | 'lg' | 'md' | Scales with density. |
Do and don't
Do
- Pick the heading level that fits the page outline.
- Keep one main idea per card.
Don't
- Nest cards inside cards.
- Wrap a whole card in a link that contains other links.
Accessibility
- Renders real headings so screen reader users can jump between cards.
- section with an id is a named region; article for self-contained items.
No keyboard interaction of its own; it contains whatever controls you put inside.