# Stat tile

One figure with its label and, when it helps, its signed change against a named comparison.

* Kind: component
* Page: https://design.werklist.com/components/stat-tile
* Version: 2.1.2

## When to use it

* The few figures a report exists to show, in one row at the top
* The key numbers page of a printed report

## When not to use it

* A trend or a comparison: use a chart
* More than one value per tile
* Icons, progress rings, sparklines or a counting animation inside a tile

## Anatomy

* Surface: 16 px radius, 16 px padding, no border (--surface-1)
* Label: 12 px, weight 500, sentence case, up to two lines (--text-muted)
* Label to value: 6 px
* Value: weight 700, tabular, letter spacing minus 0.02 em, line height 1. 28 px up to 9 characters, 22 px up to 13, 18 px beyond. It wraps between groups of digits or before the currency code and is never cut short (--text)
* Change: 12 px, weight 500, a signed figure and its comparison (--success-ink)
* Row: 2 columns, 4 from 1024 px, or 3 or 6 columns for a set of 3 or 6 tiles, 12 px apart (--space-3)

## Variants

* Screen: Reports in WerkOS and pages on werklist.com
* Paper: The key numbers page of a printed report. No surface. Label 7.5 pt, figure 26 pt weight 700, unit and year 7.5 pt, change 7.5 pt in plain ink

## Sizes

* Up to 9 characters: type 28 px
* Up to 13 characters: type 22 px
* Longer: type 18 px, wrapping

## States

* Good change: change line in the success ink (--success-ink)
* Bad change: change line in the error ink (--error-ink)
* Neutral change: change line in the quiet ink (--text-muted)
* Small change: under 1 percent the change line is left out
* Missing: the reason in words in place of the value, 18 px, in muted ink. A rate needs 5 observations before it prints (--text-muted)
* Loading: a skeleton block the size of the tile
* Link: when the tile opens a detail view: focus ring, 44 px target, hover fill (--focus-ring)

## Keyboard

* Tab: Reaches the tile only when it is a link
* Enter: Opens the detail view of a linked tile

## Accessibility

* A group named by the label
* Value and change read as one sentence, sign included
* The missing reason is visible text
* Not focusable unless it is a link

## Content

* Labels are plain nouns in sentence case: Offers accepted, Placement fees, No show rate
* The change names its comparison: +12% on last month
* Money prints its currency code after the figure: 245,000 EUR
* A long value steps down in size and wraps. It is never shortened to fit

## Tokens

* --surface-1
* --radius-2xl
* --space-4
* --space-3
* --text
* --text-muted
* --success-ink
* --error-ink
* --focus-ring