Stat

Stat tile web component: a label, a large tabular value, and an optional caption or trend.

Example

npm install @lit-material/stat @lit-material/tokens

import "@lit-material/stat";

Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide

A stat tile: what is measured, its value large, and an optional caption or trend underneath — the building block of a dashboard's summary row.

Property	Attribute	Type	Default	Description
`label`	`label`	`string`	`""`	What is measured.
`value`	`value`	`string`	`""`	The value, already formatted.
`caption`	`caption`	`string`	`""`	A line under the value, e.g. "of 2,000 requests".
`trend`	`trend`	`StatTrend \| undefined`	none	Direction of change: `up`, `down` or `flat`.
`trendLabel`	`trend-label`	`string`	`""`	The change in words, e.g. "+4.1% since yesterday" (required with `trend`, read aloud).
`trendSentiment`	`trend-sentiment`	`"positive" \| "negative" \| "neutral"`	`"neutral"`	Whether the trend is `positive`, `negative` or `neutral` (default) — colours it.
`variant`	`variant`	`StatVariant`	`"outlined"`

Slot	Description
`icon`	An optional icon beside the label.
`caption`	Rich caption content (replaces the `caption` text).

Property	Description
`--lit-material-stat-value-font`	The value's font family, e.g. monospace (default: inherited).
`--lit-material-stat-value-size`	The value's font size (default `1.5rem`).
`--lit-material-stat-value-line-height`	The value's line height (default `2rem`).
`--lit-material-stat-value-weight`	The value's font weight (default `600`).