# KPI card · MIAN

One number that matters, with its change, a sparkline you can hover and a line of context.

- Id: `kpi` · Category: Data display · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/kpi
- Use for: kpi card, metric with sparkline, number with trend, dashboard headline numbers, revenue card.
- Alternatives: stat, 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">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `mn-kpis`: A responsive row of KPI cards.
- `mn-kpi`: One card. Add mn-card for the noodle’s surface.
- `mn-kpi-head`: Label row; may end with an icon or a menu.
- `mn-kpi-row`: The value and the sparkline, side by side.
- `mn-kpi-value`: The number. Add data-mn-count to count up once when first seen.
- `mn-kpi-foot`: Change and context: a mn-stat-delta and a few words.
- `mn-spark`: On an svg.mn-chart-line: a sparkline without grid or points. mn-up / mn-down colour it; hover, touch and arrow keys show each value. data-labels and data-unit work as on charts.

## Accessibility

- Say what the change is compared with (“vs last month”); an arrow alone is not information.
- The sparkline is role="img" with an aria-label; its values are reachable with the arrow keys.
- Up is not always good: colour the delta by meaning (churn going up is mn-down).
- Counting up never replaces the text: the final value stays in the DOM.

## Examples

### KPI row

```html
<div class="mn-kpis">
  <article class="mn-card mn-kpi">
    <div class="mn-kpi-head"><span>Monthly recurring revenue</span></div>
    <div class="mn-kpi-row"><span class="mn-kpi-value" data-mn-count>€48,210</span><svg class="mn-chart-line mn-spark mn-up" data-values="31,33,36,35,39,42,44,48" data-labels="W1,W2,W3,W4,W5,W6,W7,W8" data-unit=" k€" role="img" aria-label="Monthly recurring revenue, last eight weeks"></svg></div>
    <p class="mn-kpi-foot"><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> 6.4%<span class="mn-sr-only"> increase</span></span>vs last month</p>
  </article>
  <article class="mn-card mn-kpi">
    <div class="mn-kpi-head"><span>Active customers</span></div>
    <div class="mn-kpi-row"><span class="mn-kpi-value" data-mn-count>1,284</span><svg class="mn-chart-line mn-spark" data-values="1180,1195,1201,1220,1236,1249,1262,1284" data-labels="W1,W2,W3,W4,W5,W6,W7,W8" role="img" aria-label="Active customers, last eight weeks"></svg></div>
    <p class="mn-kpi-foot"><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> 38<span class="mn-sr-only"> more</span></span>new this month</p>
  </article>
  <article class="mn-card mn-kpi">
    <div class="mn-kpi-head"><span>Churn</span></div>
    <div class="mn-kpi-row"><span class="mn-kpi-value" data-mn-count>2.1%</span><svg class="mn-chart-line mn-spark mn-down" data-values="1.6,1.7,1.6,1.8,1.8,1.9,2.0,2.1" data-labels="W1,W2,W3,W4,W5,W6,W7,W8" data-unit="%" role="img" aria-label="Churn, last eight weeks"></svg></div>
    <p class="mn-kpi-foot"><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.3 pts<span class="mn-sr-only"> higher, which is worse</span></span>vs last month</p>
  </article>
</div>
```

## Source

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