Stat tiles
A responsive grid of key numbers. Each tile has a tinted icon, a label, a big value with a unit and a meta line, and can add a share bar, a change pill, own content under the value, a highlight or a link.
Basic
Tiles fill the row and wrap below 210px per column. A null value shows "-".
Tones
tone colours the icon square, the share bar, an accent value and the highlight: neutral, primary (default), success, info, warn, danger.
Value modes
textValue shows a smaller one-line text cut with an ellipsis (the full text is in the title). fitValue shrinks a long number with the tile instead of wrapping. accentValue paints the value in the tone.
Highlighted
highlighted tints the background and the ring with the tone to pull the eye to one tile.
Aside
An element with txStatTileAside sits at the top right — a change pill. Other content goes under the value, e.g. a breakdown or a sparkline.
Links
link (router commands + queryParams) or href (+ target) turns the whole tile into one link: the ring turns primary on hover and grows to 2px on keyboard focus.
Compact
compact on the grid makes every tile tighter — smaller gap, padding, icon and value — and lets columns go down to minWidth.
Min width
minWidth sets the narrowest column before the grid wraps — here wider tiles that wrap sooner. It never goes below 210px unless the grid is compact.
Design tokens
dt on the grid changes the gap; on a tile — radius, padding, the icon shape and the value size.
Pass through
pt adds classes and styles to the parts of a tile — here an uppercase label and an italic meta line.