Data Card
ProA flexible container for presenting a single record or entity with structured fields. Combines a header (title, subtitle, avatar/icon), body (key-value fields), and footer (actions, metadata). Used for contact cards, product summaries, project overviews, and any entity that benefits from a card-based layout.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard data card with header, body fields, and footer actions. | Use for entity summaries — contacts, products, projects, team members. |
| Compact | Condensed data card for list views and grid layouts. | Use when displaying multiple cards in a grid and space is at a premium. |
Usage Guidelines
Do
Keep field labels concise and values scannable.
Don't
Cram too many fields into a single card — prioritise key information.
Do
Use consistent card layouts within the same view.
Don't
Mix card layouts (vertical and horizontal) in the same grid.
Do
Limit visible fields to 4–6 — show more on click or hover.
Don't
Use data cards for long-form content — use a detail page instead.
Code
Design Tokens
Accessibility
- Use <article> element for cards representing independent content units.
- Include a heading inside each card for screen reader navigation.
- If the card is clickable, the entire card surface should be the click target.
- Key-value pairs benefit from <dl>, <dt>, <dd> markup for accessibility.