Stat
Key metrics with labels and trend deltas, alone or in a joined row.
Dashboard row
Revenue€45,231 20.1% increase
Subscribers2,350 18%
Churn3.2% 0.4 pts
Active now573+201 since last hour
<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>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/stat.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-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.