KPI Card
ProAn enhanced metric card for key performance indicators. Extends Stat Card with richer visuals: progress rings, sparkline charts, goal tracking bars, and contextual icons. Designed for executive dashboards and summary views where metrics need more visual context than a simple number.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | KPI card with value, label, trend, and optional progress ring. | Use for primary KPIs on executive dashboards. |
| With Sparkline | KPI card with an embedded mini line chart showing historical trend. | Use when the trajectory is as important as the current value. |
| With Target |
Usage Guidelines
Do
Keep the KPI value prominent — it should be the largest element.
Don't
Overload with too many data points — each card should show one metric.
Do
Provide context with comparison periods and trend direction.
Don't
Use without a label — the number alone is meaningless without context.
Do
Limit to 4–6 KPI cards per dashboard section.
Don't
Mix KPI cards and Stat cards in the same grid — choose one pattern.
Code
Design Tokens
Accessibility
- Provide a complete aria-label summarising the KPI — "Conversion Rate: 3.24%, up 0.5% vs. last month".
- Progress bars and sparklines need aria labels describing what they represent.
- If interactive (clickable for drill-down), ensure keyboard focusability.