On this page
Overview
A figure that rolls to each new value, as an AnimatedNumber.
Show code, ProjectHealth.tsx
Variants
On a pane
A group on a pane takes the muted fill, so its figures stand apart; the pane's heading names it.
Show code, OnAPane.tsx
One figure
A Card frames a single figure.
Show code, InACard.tsx
Anatomy
Group
Label
Figure
Trend
Description
Show code, KeyFiguresAnatomy.tsx
Behaviour
Adapting to width
The grid shows as many even columns as fit, and stacks the figures in one column where there is room for only one.
Show code, GroupColumns.tsx
Rules
A few figures, each with how it changed said in words.
Use it when
- The few figures that sum up a view, such as a dashboard's
- A figure and how it changed, such as 12 percent up on last month
Built from
The change in words
Say how a figure changed in words that say which way, such as "2 fewer", with its period, as feedback shows for any status. A color or an arrow alone says nothing to many people.
A few figures
Keep a group to three to five figures. The trend's color says whether the change is good news.
- Green for good.
- Red for bad.
- Neutral for no change.
Content
Labels are short noun phrases, such as Active projects or Lead time.
- The unit goes in the figure or the description, such as 2.5 days or Median.
- Figures are formatted in the reader's language, such as 1,284 or €4,120.