Stat tile

One number with its name, and nothing competing with it. The canon (AD 19 Jul 2026) is the dashboard tile: a hairline card without a shadow, the value set in --h1 (500 16px/1.2 display) with tabular figures so a row of tiles lines up. CSS apps/web/src/ds/stat-tile.css, React apps/web/src/components/StatTile.tsx (app-side).

Measured in the catalog: box-shadow: none, 1px border, font-variant-numeric: tabular-nums.

When to use

  • A headline number on a dashboard, a report or the overview of a record: count, amount, share, average.
  • A tile that opens the listing behind the number.

When not to use

  • A field of a record — that is a Key-value row.
  • A chart, a trend or anything the user reads as a shape.
  • A label with a word instead of a number; the tile is built around a figure.

Anatomy

  • Tile .stat-tile: --surface-100, hairline, radius-lg, no shadow.
  • Label row .stat-top: optional icon, .stat-label, optional .stat-cap (a qualifier such as „otevřené“).
  • Value .stat-actual in --h1 with tabular figures; the optional .stat-target stands next to it, never under it.
  • Sub-line .stat-sub for the unit or the period.
  • Tones on the value: reached (positive), warning (amber), warn (rose), crit (critical), muted.
  • sm is the compact fact card for a record.
  • Grid .stat-grid.c3/.c4/.c5 fits its own container, not the viewport.
  • Loading .stat-skel keeps the tile's box.

Best practices

Do

  • Put the tone on the number, not on the card — the card stays neutral so a row of tiles reads as one surface.
  • Show a dash for "no data" and keep 0 for a real zero; they mean different things.
  • Give a clickable tile something to open, and let the component do it properly (role="button", tab stop, Enter/Space).
  • Keep the label short; the caption carries the qualifier.

Don't

  • Add a shadow. The tile is a hairline card by ruling.
  • Abbreviate in a way that loses meaning (1,3M where the exact figure is the point).
  • Use tabular figures anywhere except the value — dates in particular are never tabular.
  • Stack two numbers in one tile.

Content

  • Label: a noun in sentence case (Objem, Po termínu).
  • Value: the figure with its own grouping; the unit goes to the sub-line.
  • Target reads as a fraction of the goal (/ 5 000 000).
  • section-block — the heading a row of tiles usually sits under.
  • item-list, segment-table — what a clickable tile opens.
  • Stories: components--stat-tile--default, --variants, --sizes, --states, --composition.

Source: docs/stat-tile/stat-tile.usage.md · GitLab