Cards where the headline figure and its change are read first. Every KPI card shares the same head: the title, a period subtitle, the headline figure and its change badge right after it. The badge's arrow shows the direction and its color shows whether that is good or bad.
KPI - Number
kpi-number
A card with just the number and its change badge. With no graphic, it fits a narrow spot.
Judgment built in (3)
The change sits as a badge right after the number, with the baseline and its value beside it. A 0.3pp with nothing to compare against cannot be read.
Ratio metrics (pct) write their change in percentage points. From 3.1% to 3.4% is a 0.3pp increase; written as 9.7%, the change looks bigger than it is.
The badge's arrow shows the direction and its color shows whether that is good or bad. For a metric where lower is better, like a return rate, set "better": "down" and an increase gets a red badge.
KPI - Line
kpi-line
A card with a line chart under the number. Use it to show the monthly course alongside the figure.
Judgment built in (3)
The monthly line covers 13 months. The first and last are the same month, so the figure compares with the same month last year without seasonal distortion, and the change is written year over year.
The y-axis is fitted to the value range so small movements show. In return, the fill fades out toward the bottom so the area is not read as a quantity from zero.
Period names are written every three months, always keeping the first and the last; the other months' values are read by hovering or with the arrow keys.
KPI - Bar
kpi-bar
A card with vertical bars under the number. Use it to see this period's value against the size of past periods.
Judgment built in (3)
Bars are read by length, so they start at zero. That is what sets this card apart from KPI - Line, which shows only the course.
The month in progress (partial) is drawn as a dashed outline, so its length is not compared directly with finished months. The counting period goes in the subtitle under the title, and the headline figure compares with the same days of the previous month.
Past periods are light orange and only the last period is solid. Period names are written every three months, always keeping the current period.
KPI - Gauge
kpi-gauge
A card with the number in the middle of a half-circle gauge. Use it to show progress on a metric that has a target or a limit.
No month-over-month change is shown. With both a target comparison and a monthly change on one card, it is unclear which baseline the number should be read against.
Past the target, the gauge fills completely and the excess is shown only as the percentage.
For a metric where less is better, like a budget or a limit ("better": "down"), the figure is written as usage, and it turns red once the limit is exceeded.
KPI - Stacked Bar
kpi-stacked-bar
A card with one bar split by share and a legend under the number. Use it to show the shares of the parts that make up a total.
Judgment built in (3)
Up to four segments are drawn. Only the three largest items get a color; the rest fold into a gray Other. Hover to see the items inside Other.
The largest item goes on the left, colored orange, pink-red and yellow in turn. Segments are spaced apart so adjacent colors do not blend.
The legend is two rows of two with only names and shares, so it is not read by color alone. Writing amounts on a share card blurs what is being compared, so amounts appear on hover over a segment or a legend row.
