Stat

A compact card for displaying a single metric with optional label, delta, and helper text. Ideal for dashboard KPIs. Group multiple stats with .nano-stat-grid for responsive layouts.

Basic stat

Recovered revenue $4,238 Last 30 days

<div class="nano-stat">
  <span class="nano-stat__label">Recovered revenue</span>
  <span class="nano-stat__value">$4,238</span>
  <span class="nano-stat__help">Last 30 days</span>
</div>

With delta

Recovery rate 62% 12% vs last month

<div class="nano-stat">
  <span class="nano-stat__label">Recovery rate</span>
  <span class="nano-stat__value">62%</span>
  <span class="nano-stat__delta nano-stat__delta--up">
    <svg ...></svg>
    12% vs last month
  </span>
</div>

Grid of stats

At-risk MRR $1,240

Recovered $4,238 12%

Failed invoices 23 3 vs last week

<div class="nano-stat-grid">
  <div class="nano-stat">
    <span class="nano-stat__label">At-risk MRR</span>
    <span class="nano-stat__value">$1,240</span>
  </div>
  <div class="nano-stat">
    <span class="nano-stat__label">Recovered</span>
    <span class="nano-stat__value">$4,238</span>
    <span class="nano-stat__delta nano-stat__delta--up">12%</span>
  </div>
</div>

Variants

.nano-stat--elevated — shadow, no border
.nano-stat--bordered — thicker border, no shadow
.nano-stat--compact — tighter padding and smaller value

Elements

.nano-stat__label — the metric name (muted, small)
.nano-stat__value — the primary number (large, bold)
.nano-stat__delta — optional change indicator; use --up (success) or --down (destructive)
.nano-stat__help — optional helper text below the value
.nano-stat__footer — optional separated footer area (e.g. “View details →”)