Stat tile · kit

Example

Label

12,480

+8.2% vs last period

Rate

3.4%

−0.3 pts vs last period

Response time

182ms

−12% lower is better

Unchanged

0.00

0% vs last period

Show the markup

<div class="kit-grid demo-fill" data-min="xs" data-cols="2" data-gap="3">
  <div class="kit-stat"><p class="kit-stat-label">Label</p><p class="kit-stat-value">12,480</p><p class="kit-stat-delta" data-trend="up">+8.2% <span>vs last period</span></p></div>
  <div class="kit-stat"><p class="kit-stat-label">Rate</p><p class="kit-stat-value">3.4<small>%</small></p><p class="kit-stat-delta" data-trend="down">−0.3 pts <span>vs last period</span></p></div>
  <div class="kit-stat"><p class="kit-stat-label">Response time</p><p class="kit-stat-value">182<small>ms</small></p><p class="kit-stat-delta" data-trend="down" data-good="down">−12% <span>lower is better</span></p></div>
  <div class="kit-stat"><p class="kit-stat-label">Unchanged</p><p class="kit-stat-value">0.00</p><p class="kit-stat-delta" data-trend="flat">0% <span>vs last period</span></p></div>
</div>

Usage

<div class="kit-grid" data-min="sm">
  <div class="kit-stat">
    <p class="kit-stat-label">Label</p>
    <p class="kit-stat-value">12,480</p>
    <p class="kit-stat-delta" data-trend="up">+8.2% <span>vs last week</span></p>
  </div>
</div>

Attribute	Values	Default
`data-trend`	`up`, `down`, `flat`, on the delta	none
`data-good`	`down` when falling is good (costs, errors, load time)	`up`
`data-flush`	present for no border or padding, inside a card	a bordered tile

A <small> inside the value holds its unit (ms, GB). Lay tiles out with the grid. Figures use tabular numbers, so tiles line up when they change.

Accessibility

The direction is in the words (+8.2%, −3%) and the arrow's shape, not only the colour.
Write the delta so it reads well aloud: "+8.2% vs last week". The arrow is decoration and isn't read.
When tiles update live, announce what changed with announce() rather than making the tiles a live region.