Stat Card
ProA compact card displaying a single key metric with its label, value, and an optional trend indicator (up/down arrow with percentage). Used in dashboards and analytics views to surface KPIs at a glance. Supports an optional icon and comparison period label.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Stat card with label, value, and optional trend arrow. | Use for standard KPI display in dashboards — revenue, users, conversion rate. |
| With Trend | ||
| Compact | Smaller stat card for dense dashboard layouts with multiple metrics. | Use in grid layouts with 4+ metrics where space is limited. |
Usage Guidelines
Use a clear, concise label that describes the metric.
Show too many stat cards — limit to 4–6 per dashboard section.
Format numbers appropriately — use locale-aware formatting, abbreviations for large numbers.
Use vague labels like "Count" or "Total" without context.
Colour-code trend arrows — green for positive, red for negative.
Omit units or currency symbols — "12.5" is ambiguous, "$12.5K" is clear.
Include the comparison period — e.g., "vs. last month".
Rely solely on colour for trend direction — always include an arrow icon.
Code
Design Tokens
Accessibility
- Use semantic HTML — label, value, and trend can be structured with headings or description lists.
- Trend direction must be conveyed with text ("+12.5%") not just colour or arrow icons.
- If the card is interactive (clickable for drill-down), it must be keyboard focusable.
- Consider aria-label or a visually hidden summary for screen readers — e.g., "Monthly Revenue: $48,250, up 12.5% vs. last month".