{
  "title": "Stat tile",
  "path": "/components/stat-tile",
  "url": "https://design.werklist.com/components/stat-tile",
  "text": "https://design.werklist.com/agent/components/stat-tile",
  "summary": "One figure with its label and, when it helps, how it changed.",
  "version": "2.1.2",
  "kind": "component",
  "name": "Stat tile",
  "purpose": "One figure with its label and, when it helps, its signed change against a named comparison.",
  "use": [
    "The few figures a report exists to show, in one row at the top",
    "The key numbers page of a printed report"
  ],
  "avoid": [
    "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": [
    {
      "part": "Surface",
      "measure": "16 px radius, 16 px padding, no border",
      "token": "--surface-1"
    },
    {
      "part": "Label",
      "measure": "12 px, weight 500, sentence case, up to two lines",
      "token": "--text-muted"
    },
    {
      "part": "Label to value",
      "measure": "6 px"
    },
    {
      "part": "Value",
      "measure": "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",
      "token": "--text"
    },
    {
      "part": "Change",
      "measure": "12 px, weight 500, a signed figure and its comparison",
      "token": "--success-ink"
    },
    {
      "part": "Row",
      "measure": "2 columns, 4 from 1024 px, or 3 or 6 columns for a set of 3 or 6 tiles, 12 px apart",
      "token": "--space-3"
    }
  ],
  "variants": [
    {
      "name": "Screen",
      "use": "Reports in WerkOS and pages on werklist.com"
    },
    {
      "name": "Paper",
      "use": "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": [
    {
      "name": "Up to 9 characters",
      "type": "28 px"
    },
    {
      "name": "Up to 13 characters",
      "type": "22 px"
    },
    {
      "name": "Longer",
      "type": "18 px, wrapping"
    }
  ],
  "states": [
    {
      "name": "Good change",
      "change": "change line in the success ink",
      "tokens": [
        "--success-ink"
      ]
    },
    {
      "name": "Bad change",
      "change": "change line in the error ink",
      "tokens": [
        "--error-ink"
      ]
    },
    {
      "name": "Neutral change",
      "change": "change line in the quiet ink",
      "tokens": [
        "--text-muted"
      ]
    },
    {
      "name": "Small change",
      "change": "under 1 percent the change line is left out"
    },
    {
      "name": "Missing",
      "change": "the reason in words in place of the value, 18 px, in muted ink. A rate needs 5 observations before it prints",
      "tokens": [
        "--text-muted"
      ]
    },
    {
      "name": "Loading",
      "change": "a skeleton block the size of the tile"
    },
    {
      "name": "Link",
      "change": "when the tile opens a detail view: focus ring, 44 px target, hover fill",
      "tokens": [
        "--focus-ring"
      ]
    }
  ],
  "keys": [
    {
      "key": "Tab",
      "action": "Reaches the tile only when it is a link"
    },
    {
      "key": "Enter",
      "action": "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"
  ]
}