KPI

Key Performance Indicator displays for metrics and statistics.

Positive and negative change lines use --af-color-success-hard / --af-color-danger-hard so small delta text stays readable on surface backgrounds.

Markup

Total Users

1,234

+12%

Revenue

$45,678

+5%

Churn Rate

2.3%

-0.5%

<div class="af-kpi">
  <div class="af-kpi-label">Total Users</div>
  <div class="af-kpi-value">1,234</div>
  <div class="af-kpi-change af-is-positive">+12%</div>
</div>
<div class="af-kpi">
  <div class="af-kpi-label">Churn Rate</div>
  <div class="af-kpi-value">2.3%</div>
  <div class="af-kpi-change af-is-negative">-0.5%</div>
</div>