Metric Cards

Build KPI tiles with icon wells, values, and trend pills.

KPI anatomy

Active learners

1,248

+12% vs last month
Open tasks

86

-8% vs last month
Featured goal

92%

On track this week

Nested well

Monthly target

75%

+5 pts

Important pattern

Metric cards share label, value, and trend structure.

<article class="metric-card">
  <span class="metric-label">Active learners</span>
  <p class="metric-value">1,248</p>
  <span class="trend trend-up">+12% vs last month</span>
</article>