Stat tile

A key number with its label and change, for dashboards and summaries.

CSS only components/stat.css

Key numbers

Outstanding

CZK 48 200

+12 %vs last month

Average time to pay

18 days

−3 daysvs Q2

<div class="dsgn-grid" data-cols="1" data-cols-tablet="2">
  <div class="dsgn-stat"><p class="dsgn-stat-label">Outstanding</p><p class="dsgn-stat-value">CZK 48 200</p><p class="dsgn-stat-meta"><span class="dsgn-stat-delta" data-intent="warning"><span class="dsgn-icon" aria-hidden="true">trending_up</span>+12 %</span>vs last month</p></div>
  <div class="dsgn-stat"><p class="dsgn-stat-label">Average time to pay</p><p class="dsgn-stat-value">18 days</p><p class="dsgn-stat-meta"><span class="dsgn-stat-delta" data-intent="success"><span class="dsgn-icon" aria-hidden="true">trending_down</span>−3 days</span>vs Q2</p></div>
</div>

Usage

Direction (the icon) and meaning (data-intent) are separate: more overdue money goes up but is bad. The delta always has text, so colour is never the only signal. Value = heading type with tabular numbers. Surface, border and padding match Card. Put tiles in a Grid: <div class="dsgn-grid" data-cols="2" data-cols-desktop="4">.

Details

Classes: .dsgn-stat .dsgn-stat-label .dsgn-stat-value .dsgn-stat-meta .dsgn-stat-delta .dsgn-icon
Tokens used: --dsgn-border --dsgn-danger-text --dsgn-font-sans --dsgn-font-size-body-s --dsgn-font-size-heading --dsgn-font-weight-medium --dsgn-font-weight-semibold --dsgn-inset --dsgn-line-container --dsgn-line-height-body-s --dsgn-line-height-heading --dsgn-radius-l --dsgn-shadow-raised --dsgn-space-2 --dsgn-space-4 --dsgn-success-text --dsgn-surface-raised --dsgn-text --dsgn-text-muted --dsgn-warning-text
In Figma: Stat tile
Import alone: dsgn.systems/components/stat.css