Variant 01
Metric card
A compact value with context and a supporting action.
View content
Metric+12%
Last 30 days
Activation rate
68.4%
Compared with the previous 30 days.
View trend ↗
Components / organisms
Cards
A card groups information that belongs together, from a single number to a work item with an action.
Usage
When to use it
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.
Variant 02
Media and interaction modes
Image, selected, hover, and disabled states are composable.
View content
With media
Field survey 2026
View content
Hover
Quarterly report
Selected
Site inspection
Disabled
Archived record
03 / contract
Rules the component follows
A card groups information that belongs together on a surface with a clear boundary. It is built from a card with an optional image, header, body and footer, and it can be shown in the modes default, hover, selected and disabled. A card holds one clear action, and cards that are compared in a grid keep the same height.
A card can be an independent article, or it can be a single clickable surface. It should not contain a link or a button inside another link or button.
04 / accessibility
Accessibility information
Interactive elements are never nested inside other interactive elements, because assistive technology cannot describe them correctly. Card groups use meaningful headings, and a status shown in a card is always available as text and not by colour alone.
An image in a card needs useful alternative text, or an empty one when it is decorative, so that people who cannot see it still get the same information.