Skip to content

Metrics & Stats

Dashboard stat blocks display key payment metrics at a glance. Inspired by Stripe's dashboard density — clean, scannable, and data-forward.

Stat Block

Total collected
$12,450
↑ 12% vs last month
Active subscriptions
248
↑ 8 new this week
Pending payments
14
Requires attention
Failed this month
3
↓ 2 vs last month
.stat {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 20px 24px;
  box-shadow: 0px 0px 6px 3px rgba(127, 146, 189, 0.1);
  font-family: 'Cabin', sans-serif;
}

.stat__label {
  font-size: 13px;
  color: #999999;
  margin-bottom: 4px;
}

.stat__value {
  font-size: 32px;
  font-weight: 700;
  color: #333333;
  line-height: 1.1;
  margin-bottom: 4px;
}

.stat__meta {
  font-size: 12px;
  color: #999999;
}

/* Positive trend */
.stat__meta--positive { color: #1a7f4b; }

/* Negative trend */
.stat__meta--negative { color: #c80000; }

/* Warning */
.stat__meta--warning { color: #92400e; }

Compact Stat (Mobile Dashboard)

COLLECTED
$12,450
SUBSCRIPTIONS
248
<div style="display:flex; gap:12px; flex-wrap:wrap;">
  <div style="flex:1; min-width:120px; background:#EBF0FF; border-radius:8px; padding:16px; font-family:'Cabin',sans-serif;">
    <div style="font-size:12px; color:#6687DC; font-weight:600; letter-spacing:0.06em; margin-bottom:4px;">COLLECTED</div>
    <div style="font-size:24px; font-weight:700; color:#333;">$12,450</div>
  </div>
  <div style="flex:1; min-width:120px; background:#F9EEFF; border-radius:8px; padding:16px; font-family:'Cabin',sans-serif;">
    <div style="font-size:12px; color:#5C0390; font-weight:600; letter-spacing:0.06em; margin-bottom:4px;">SUBSCRIPTIONS</div>
    <div style="font-size:24px; font-weight:700; color:#333;">248</div>
  </div>
</div>

Stat Grid Layout

/* 4-column stat grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .stats-grid { grid-template-columns: 1fr; }
}

Rules

Metrics rules

  • Stat values use font-size: 32px; font-weight: 700 — always bold and large
  • Stat labels use font-size: 13px; color: #999 — muted and small
  • Trend indicators use semantic colors: green for positive, red for negative, amber for warning
  • Use ↑ and ↓ arrows for trend direction — simple and universal
  • Stat blocks always use white background with --mp-shadow-card
  • Arrange stats in a 4-column grid on desktop, 2-column on tablet, 1-column on mobile
  • Currency values always include the currency symbol and 2 decimal places