Components / Data display / KPI tiles
D5 · Data display
KPI tiles
One large figure with a written delta, plus a strip of five summary tiles.
<article class="c-tile hero">
<p class="label">Open items</p>
<p class="value num">7</p>
<p class="c-delta up">2 fewer than the prior example week</p>
</article>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- A page opens with the current totals.
- Each tile is one number with a short name.
When not to use
- The figures need a time axis. Use the line chart.
- A tile would hide a list people must act on.
Usage
<article class="c-tile hero">
<p class="label">Open items</p>
<p class="value num">7</p>
<p class="c-delta up">2 fewer than the prior example week</p>
</article>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| value | number | — | Tile figure. Does not wrap. |
| c-delta | text | — | Change written in words and a number. |
| hero | class | absent | The primary tile. |
Keyboard
| Key | Action |
|---|---|
| Tab | Moves through the page. Tiles are not controls. |
Accessibility
- The delta is a sentence, not only a colour.
- Tiles use the label and value roles.
- Numbers are tabular.
Motion
- No motion.
Pattern origin
Pattern type: one primary figure and a row of summary tiles.