Stat Cards

KPI and metric display cards — the dashboard's heartbeat.

Standard Stats

Stat Card Row

433 Total Accounts

$144.8M Pipeline Value

81 Avg Health

20 Active Agents

$3.01M Inference Tax Saved

HTML

<div class="monarch-stat-card">
  <div class="monarch-stat-card__icon" style="background: rgba(59,130,246,0.12);">
    <svg style="color: #3B82F6;">...</svg>
  </div>
  <span class="monarch-stat-card__value">433</span>
  <span class="monarch-stat-card__label">Total Accounts</span>
</div>

With Trend

Stat Cards with Trends

Revenue 12.5%

$2.4M

vs $2.1M last quarter

Win Rate 3.2%

34%

vs 37% last quarter

Avg Deal Size —

$185K

No change from last quarter

HTML

<div class="monarch-stat-card">
  <div style="display:flex; justify-content:space-between; margin-bottom:12px;">
    <span class="monarch-stat-card__label">Revenue</span>
    <span class="monarch-stat-card__trend monarch-stat-card__trend--up">↑ 12.5%</span>
  </div>
  <span class="monarch-stat-card__value">$2.4M</span>
</div>

Usage Guidelines

• Stat cards work best in a horizontal row — 3-5 cards across

• Icon color should match the metric's semantic category

• Numbers should be formatted for readability — $144.8M not $144,825,520

• Trend indicators: green up = good, red down = concern, dash = flat