Stat
KPI tile: label, value and a trend badge against a comparison period.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
Total revenue
$45,23120%vs last month
Churn
2.4%0.6%
<div class="row" style="width:100%;flex-wrap:wrap">
<div class="px-stat" style="flex:1;min-width:200px"><span class="px-stat__label">Total revenue</span><div class="px-stat__row"><span class="px-stat__value">$45,231</span><span class="px-trend"><svg class="px-icon" aria-hidden="true">…</svg>20%<small>vs last month</small></span></div></div>
<div class="px-stat" style="flex:1;min-width:200px"><span class="px-stat__label">Churn</span><div class="px-stat__row"><span class="px-stat__value">2.4%</span><span class="px-trend px-trend--down"><svg class="px-icon" aria-hidden="true">…</svg>0.6%</span></div></div>
</div>Usage
- Trend color is paired with an arrow, never color alone.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-stat | class | Tile. |
px-trend · --down · --neutral | class | Trend. |
Figma properties
Stat6 variants · page “Data display”Open
KPI tile: label, value and trend badge against a comparison period. Trend colour is paired with an arrow so it does not rely on colour alone. Numbers use Arabic-Indic digits in the Arabic locale.
| Property | Type | Values |
|---|---|---|
| Label | Text | “Total revenue” |
| Value | Text | “$45,231.89” |
| Show trend | Boolean | — |
| Trend | Variant | Up Down Neutral |
| Direction | Variant | LTR RTL |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-stat-label | color-content-neutral-secondary | #475467 |
Accessibility
- Say the direction in text for screen readers if the arrow is the only cue.