Stat
A number that deserves to be read: a label above it, the figure in tabular numerals, an optional delta with its direction and a hint underneath. Several of them make an iv-stat-group, a grid separated by hairlines rather than boxes. The figures are static; an animated counter is a different component and belongs to a later version.
<div class="iv-stat-group">
<div class="iv-stat">
<span class="iv-stat__label">Stylesheet</span>
<strong class="iv-stat__value">22.17<span class="iv-u-text-sm"> KiB</span></strong>
<span class="iv-stat__delta" data-iv-tone="flat">+1.17 KiB vs v0.5</span>
<span class="iv-stat__hint">min + gzip, budget 40 KiB</span>
</div>
<div class="iv-stat">
<span class="iv-stat__label">Bundled JS</span>
<strong class="iv-stat__value">35.42<span class="iv-u-text-sm"> KiB</span></strong>
<span class="iv-stat__delta" data-iv-tone="flat">no change<span class="iv-u-sr-only"> since v0.5</span></span>
<span class="iv-stat__hint">all components, budget 48 KiB</span>
</div>
<div class="iv-stat">
<span class="iv-stat__label">Unit tests</span>
<strong class="iv-stat__value">590</strong>
<span class="iv-stat__delta" data-iv-tone="up">all passing<span class="iv-u-sr-only">, no failures</span></span>
<span class="iv-stat__hint">25 files, last full run</span>
</div>
<div class="iv-stat">
<span class="iv-stat__label">Engines</span>
<strong class="iv-stat__value">3</strong>
<span class="iv-stat__hint">Chromium, Firefox and WebKit: tested in, not "all browsers"</span>
</div>
</div>
<p class="iv-u-text-sm iv-u-text-muted iv-u-mt-6">These are the figures measured by the gate of this package at <code>0.5.0-beta.0</code> (<code>npm run sizes</code>, <code>npm test</code>); they are not marketing numbers. The tone of a delta is its sentiment, not its sign: growing by 1.17 KiB is neither good nor bad, so it stays muted, while a passing suite is marked up. The sign and the direction live in the text and in the arrow, never in the colour alone.</p>Cards, large and glow
iv-stat--card puts a figure on its own surface with the shared ambient elevation, iv-stat--lg takes the value up one step of the type scale, and iv-stat--glow paints it with the brand gradient. The three combine.
<div class="iv-stat-group">
<div class="iv-stat iv-stat--card iv-stat--glow">
<span class="iv-stat__label">Core stylesheet</span>
<strong class="iv-stat__value">2.51<span class="iv-u-text-sm"> KiB</span></strong>
<span class="iv-stat__delta" data-iv-tone="flat">unchanged since v0.5</span>
<span class="iv-stat__hint">tokens + reset, budget 8 KiB</span>
</div>
<div class="iv-stat iv-stat--card">
<span class="iv-stat__label">Components</span>
<strong class="iv-stat__value">24</strong>
<span class="iv-stat__delta" data-iv-tone="up">+5 in v0.6<span class="iv-u-sr-only"> more than v0.5</span></span>
<span class="iv-stat__hint">navbar, stepper, timeline, stat, avatar</span>
</div>
<div class="iv-stat iv-stat--card">
<span class="iv-stat__label">Open failures</span>
<strong class="iv-stat__value">0</strong>
<span class="iv-stat__delta" data-iv-tone="up">all clear<span class="iv-u-sr-only">, none open</span></span>
<span class="iv-stat__hint">of high severity, see PROJECT_STATE</span>
</div>
</div>
<div class="iv-stat iv-stat--lg iv-u-mt-8">
<span class="iv-stat__label">Published releases</span>
<strong class="iv-stat__value">0</strong>
<span class="iv-stat__hint">nothing has been published or deployed</span>
</div>
<p class="iv-u-text-sm iv-u-text-muted iv-u-mt-6">Card figures sit on their own surface with the shared ambient elevation. The large variant is the same block at <code>text-4xl</code>. All numbers come from the state of this repository, including the zero.</p>Anatomy
| Class | Role |
|---|---|
iv-stat | The block: label, value, delta and hint in a column. |
iv-stat__label | What is being measured, in small caps with --iv-tracking-caps. |
iv-stat__value | The figure, at --iv-text-3xl with tabular numerals and --iv-tracking-tight. |
iv-stat__delta | The change, with an arrow drawn by a mask and a tone in data-iv-tone. |
iv-stat__hint | The footnote: period, budget, source. |
iv-stat-group | Grid of minmax(10rem, 1fr) columns with a hairline between figures from md up. |
Tones, and telling the truth
data-iv-tone on the delta takes up (success), down (danger) and flat (muted); the arrow turns with it. The tone is sentiment, not arithmetic: a stylesheet growing by 1.17 KiB is neither good nor bad, so it stays flat, while a suite that passes is marked up. Whatever the colour says, the text must say as well — the sign, the direction, or a visually hidden word after it. The figures in the fixtures above are the ones this package measures in its own gate, budgets included, and the zero of published releases is a real zero.
Tokens and locals
| Local | Default | What it moves |
|---|---|---|
--iv-stat-size | var(--iv-text-3xl) | Size of the value; --lg raises it to 4xl. |
--iv-stat-gap | var(--iv-space-1) | Space between label, value, delta and hint. |
--iv-stat-align | start | Alignment of the block; center for a centred row. |
--iv-stat-group-min | 10rem | Narrowest a column may get before the grid wraps. |
A card figure uses --iv-shadow-ambient, the resting elevation shared with cards, tables and alerts since v0.6.
Accessibility and keyboard
Nothing here is focusable, so there is no keyboard behaviour to learn: it is text. The order in the markup is label, value, delta, hint, which is also the order it is read in. The arrow is decoration painted by CSS, so the direction has to live in the text — +8.2%, down, or an iv-u-sr-only word. If a figure needs units, write them; a screen reader does not see the column header your eye supplies. When several figures form a table of numbers rather than a row of headlines, use a table.
Without JavaScript
There is no JavaScript. The values are served as text and stay as served.
Common mistakes
- A figure with no label or no period. "12.4k" alone is not information.
- Colour as the only sign of direction.
- Invented numbers in a demo that does not say they are invented.
- A group of eight figures: a row of headlines stops being read past four or five.