Data display
Stat card
A single metric with its label and trend.
Examples
Trend uses an arrow and a sign, not only colour
- Reach
- 2.4M▲ +12% vs last month
- Approvals
- 86▼ −3% vs last month
Anatomy
Stat card anatomy| # | Part | Description | Presence |
|---|
| 1 | Label | What is measured | Required |
|---|
| 2 | Value | Large number | Required |
|---|
| 3 | Trend | Arrow, sign and text | Optional |
|---|
Specifications
| Padding | 14px top and bottom · 16px left and right |
|---|
| Width | Fixed standard width for grid alignment |
|---|
Interaction
Keyboard| Key | Result |
|---|
| None | Static |
|---|
Pointer and touch| Trigger | Response |
|---|
| Hover | None unless it links to a report |
|---|
Accessibility
role · description list
1.3.1Info and Relationships1.4.1Use of Colour
Requirements| Requirement | How Rig meets it |
|---|
| Semantics | <dl>: term is the label, definition is the value |
|---|
| Trend | Use ▲ ▼ and a sign, not colour alone |
|---|
| Units | Always include them in text |
|---|
Usage
Do and don’t| Do | Don’t |
|---|
| ✓State the period: vs last month | ✕Do not show a trend as colour only |