KPI Tile Grid

Everything below can be changed without touching the animation. Hand the list to an agent, or edit the values at the bottom of the component file.

• Title *

  title · string

  Board headline, top left. Four to six words. This is the sentence the numbers are evidence for.

  now: Q3 in four numbers

• Eyebrow

  eyebrow · string

  Small accent label above the title. The report's name or cadence: 'Board update', 'Week 34'.

  now: Board update

• Period

  period · string

  Right-aligned mono line on the title's baseline (the window the figures cover, e.g. '01 Jul) 30 Sep'.

  now: 01 Jul — 30 Sep

• Tiles *

  tiles · array

  The metrics, in reading order. Four is the designed case and fills a 16:9 row; two or three widen, five or six wrap to a three-across grid.

  now: 4 items

• Currency symbol

  currencySymbol · string

  Mark set before every 'currency' tile, at half size and quiet. '$', '€', '£', 'CHF'.

  now: $

• Sparklines

  sparklines · boolean

  Draw the trailing sparkline in each tile. Turn it off for a denser, figure-only board.

  now: true

• Footnote

  footnote · string

  Quiet mono line at the bottom left, under a hairline, the methodology or comparison basis. One short sentence.

  now: Deltas versus the prior quarter · sparklines show trailin…

• Source

  source · string

  Right-aligned attribution opposite the footnote, the team or system the numbers came from.

  now: Finance ops

• Brand

  brand · string

  Brand token id, one of the keys of BRANDS.

  now: slate