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

<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>

Live example

Total Users

1,234

+12%

Revenue

$45,678

+5%

Churn Rate

2.3%

-0.5%