Monthly recurring revenue
€48,210
6.4% increasevs last month
KPI card
One number that matters, with its change, a sparkline you can hover and a line of context.
KPI row
Active customers
1,284
38 morenew this month
Churn
2.1%
0.3 pts higher, which is worsevs last month
<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>Installation
Everything ships in one stylesheet and one small script. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>Prefer to own the files? /r/kpi.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| 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.