Stat

The .pl-c-stat component displays a single metric for dashboards. A label, a large value with optional unit, a trend indicator (up/down/flat with arrow glyph - colorblind-safe), and an optional sparkline slot.

Semantic HTML

<div class="pl-c-stat">
  <span class="pl-c-stat__label">Monthly revenue</span>
  <div class="pl-c-stat__value">
    $48,200<span class="pl-c-stat__unit">/mo</span>
  </div>
  <span class="pl-c-stat__trend" data-direction="up">12.4% vs last month</span>
</div>

Tone variants on the value

Apply data-tone on .pl-c-stat__value to colour the number itself — consistent with pl-c-badge, pl-c-alert, and pl-c-toast. Useful for dashboards that need to highlight thresholds (e.g. overdue counts in danger):

<div class="pl-c-stat__value" data-tone="danger">
  12<span class="pl-c-stat__unit">overdue</span>
</div>

Valid tones: success, warning, danger. Omit for default text colour.

Class contract

Accessibility

The trend arrow is always present via ::before content, so color is not the sole signal of direction (WCAG 1.4.1). Up = success-text, down = danger-text, flat = text-muted.