Data and analytics · §5.24

Stat tile

A key number, its unit and how it compares with usual.

Theme
Contrast
Language
Motion
Text size

Code

<StatTile delta="6 min faster than usual Tuesday" deltaState="typical" label="Median time to physician" unit="min" value="42" />

Accessibility

  • The delta is words with an icon, never an arrow or colour alone.

Usage

Do

  • A sparkline with no axes.

Don't

  • No more than 5 tiles in a row.

Platforms

Web
apps/web/components/edflow/stat-tile.tsx, apps/web/components/ui/card.tsx
iOS
SwiftUI GroupBox
Android
Compose Card