Variant 01
Metric card
A compact value with context and a supporting action.
View content
Metric card
Activation rate
68.4%
Compared with the previous 30 days.
View trend ↗
Components / grouping
Cards
Cards create a composed surface for information that belongs together, from a single metric to a decision-ready work item.
How it's used?
A pattern with a job to do.
Use a card to group related content with a clear boundary. Cards can be independent articles, or they can contain one clear action without nesting interactive controls.
02 / examples
See the component in context.
+12%
Variant 02
Media and interaction modes
Image, selected, hover, and disabled states are composable.
View content
Media card
View content
Hover state
Selected state
Disabled state
03 / contract
Component contract
- Use Card with CardImage, CardHeader, CardBody, and CardFooter parts.
- Modes include default, hover, selected, and disabled.
- Keep one clear interactive action per card.
- Use equal-height cards when comparing items in a grid.
04 / accessibility
Accessibility information
- Do not nest links or buttons inside another interactive element.
- Use meaningful headings for card groups.
- Keep status information available as text, not color alone.
- Provide useful alt text for CardImage content.