# Stat · MIAN

Key metrics with labels and trend deltas, alone or in a joined row.

- Id: `stat` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/stat
- Use for: kpi, metric card, dashboard numbers, revenue stat, trend delta.
- Alternatives: figures.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-stats`: Joined responsive row.
- `mn-stat`: One metric.
- `mn-stat-label · mn-stat-value · mn-stat-delta`: Parts. Add mn-up or mn-down to the delta.

## Accessibility

- Deltas use both colour and an arrow; add visually hidden text such as "increase" if the arrow is decorative.

## Examples

### Dashboard row

```html
<div class="mn-stats">
  <div class="mn-stat"><span class="mn-stat-label">Revenue</span><span class="mn-stat-value">€45,231</span><span class="mn-stat-delta mn-up"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M6 11l6-6 6 6"/></svg> 20.1% <span class="mn-sr-only">increase</span></span></div>
  <div class="mn-stat"><span class="mn-stat-label">Subscribers</span><span class="mn-stat-value">2,350</span><span class="mn-stat-delta mn-up"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M6 11l6-6 6 6"/></svg> 18%</span></div>
  <div class="mn-stat"><span class="mn-stat-label">Churn</span><span class="mn-stat-value">3.2%</span><span class="mn-stat-delta mn-down"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M6 13l6 6 6-6"/></svg> 0.4 pts</span></div>
  <div class="mn-stat"><span class="mn-stat-label">Active now</span><span class="mn-stat-value">573</span><span class="mn-stat-delta">+201 since last hour</span></div>
</div>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/stat/source