Stat
One figure, what it measures and how it moved.
On this page
A stat is one figure and what it measures: a quiet label, the value in large tabular figures, and an optional change beside it. It has no surface of its own. Put it in a card, or set several in a row. A figure that is a cost is a price.
Stat
<div class="tray grid grid-cols(3) gap(4)"> <div class="card card-flat"> <div class="stat"> <p class="stat-label">Requests</p> <div class="stat-row"> <p class="stat-value">1.28M</p> <p class="stat-delta stat-delta-up">12.4%</p> </div> </div> </div> <div class="card card-flat"> <div class="stat"> <p class="stat-label">Error rate</p> <div class="stat-row"> <p class="stat-value">0.02%</p> <p class="stat-delta stat-delta-down">0.4%</p> </div> </div> </div> <div class="card card-flat"> <div class="stat"> <p class="stat-label">Median response</p> <div class="stat-row"> <p class="stat-value">84ms</p> <p class="stat-delta">No change</p> </div> </div> </div></div>#The change
stat-delta sits on the value's baseline. stat-delta-up and stat-delta-down add an arrow and a status ink; without either it is a neutral note.
The modifiers describe the direction, and the color follows the direction: up is the success ink, down the danger ink. When a fall is good news, as with an error rate or a cost, say so in words, or leave the delta neutral. The arrow and the number carry the meaning; the hue only agrees with them.
#With a description
stat-description adds a line under the figure: the period, the comparison, or the target.
With a description
<div class="card max-w(320) mx-auto"> <div class="stat"> <p class="stat-label">Build minutes</p> <div class="stat-row"> <p class="stat-value">3,412</p> <p class="stat-delta stat-delta-up">8%</p> </div> <p class="stat-description">Of 6,000 included this month, compared with October.</p> </div> <meter class="meter" min="0" max="6000" low="4500" high="5700" optimum="0" value="3412" aria-label="Build minutes used">3,412 of 6,000</meter></div>#Accessibility
- The arrow is drawn by the stylesheet and is not announced. Write the direction into the text a screen reader gets, for example with a visually hidden "up" before the number.
- Figures use tabular numerals, so a value that updates does not shift the text around it.
- Several stats that describe one thing read well as a
<dl>, withstat-labelon the<dt>and the row inside the<dd>.
#Classes
| Class | Description |
|---|---|
stat | The group |
stat-label | What is measured |
stat-row | The value and its change, on one baseline |
stat-value | The figure, in large tabular numerals |
stat-delta | How the figure moved; a neutral note without a direction |
stat-delta-up | An arrow that points up and the success ink. With stat-delta |
stat-delta-down | An arrow that points down and the danger ink. With stat-delta |
stat-description | A line under the figure: the period, the comparison or the target |