Metric Row
ProA horizontal row of key metric cards displaying label, value, and optional trend indicator. Used at the top of dashboards and reports to surface high-level KPIs at a glance. Each metric can include a sparkline, percentage change, or comparison to a previous period.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Row of metric cards with label, large value, and trend arrow. | Use at the top of dashboards for primary KPIs — revenue, users, conversion rate. |
| With Dividers |
Usage Guidelines
Do
Limit the row to 3-5 metrics — more dilutes the signal.
Don't
Display more than 5 metrics in a single row — prioritise the most important.
Do
Show trend direction (up/down arrow) and percentage change for context.
Don't
Show raw numbers without labels — "12,340" means nothing without "Active Users".
Do
Use consistent number formatting — currency symbols, percentages, thousands separators.
Don't
Use colour alone to indicate positive/negative trends — pair with icons and text.
Code
Design Tokens
Accessibility
- Use role="list" with role="listitem" so screen readers announce the count and position of metrics.
- Trend indicators (arrows) must have text alternatives — "up 12.3%" not just a colour change.
- Sparklines should have aria-hidden="true" with the trend described in text.
- Number values should use aria-label for proper reading — "48.2 thousand dollars" not "dollar 48 point 2 k".