Stat | Brio

Examples

Basic usage

Revenue $12,450 +12.5% vs last month

<div class="stat">
            <span class="stat-label">Revenue</span>
            <span class="stat-value">$12,450</span>
            <span class="stat-description">
                <span class="trend is-up">+12.5%</span> vs last month
            </span>
        </div>

Grid of stat cards

Revenue $12,450 +12.5% vs last month

Open issues 37 -8 from last week

Uptime 99.98% 0.0% change

<div class="grid" style="--grid-min: 14rem">
            <div class="card">
                <div class="stat">
                    <span class="stat-label">Revenue</span>
                    <span class="stat-value">$12,450</span>
                    <span class="stat-description">
                        <span class="trend is-up">+12.5%</span> vs last month
                    </span>
                </div>
            </div>
            <div class="card">
                <div class="stat">
                    <span class="stat-label">Open issues</span>
                    <span class="stat-value">37</span>
                    <span class="stat-description">
                        <span class="trend is-down">-8</span> from last week
                    </span>
                </div>
            </div>
            <div class="card">
                <div class="stat">
                    <span class="stat-label">Uptime</span>
                    <span class="stat-value">99.98%</span>
                    <span class="stat-description">
                        <span class="trend is-neutral">0.0%</span> change
                    </span>
                </div>
            </div>
        </div>

Compact

Users 1,204

Sessions 3,891

Bounce rate 24.3%

<div class="grid" style="--grid-min: 10rem">
            <div class="stat is-compact">
                <span class="stat-label">Users</span>
                <span class="stat-value">1,204</span>
            </div>
            <div class="stat is-compact">
                <span class="stat-label">Sessions</span>
                <span class="stat-value">3,891</span>
            </div>
            <div class="stat is-compact">
                <span class="stat-label">Bounce rate</span>
                <span class="stat-value">24.3%</span>
            </div>
        </div>

Minimal -- without trend

Open issues 37 4 critical, 12 in review

<div class="stat">
            <span class="stat-label">Open issues</span>
            <span class="stat-value">37</span>
            <span class="stat-description">4 critical, 12 in review</span>
        </div>

Semantic markup with <dl>

Revenue: $12,450; +12.5% vs last month

<dl class="stat">
            <dt class="stat-label">Revenue</dt>
            <dd class="stat-value">$12,450</dd>
            <dd class="stat-description"><span class="trend is-up">+12.5%</span> vs last month</dd>
        </dl>

Source comments

Stat -- metric display: label, big number, optional description /
trend (extra).

Pairs with .trend (separate file in extras) for inline delta
indicators inside .stat-description.

Markup:
  <div class="stat">
      <span class="stat-label">Revenue</span>
      <span class="stat-value">$12,450</span>
      <span class="stat-description">
          <span class="trend is-up">+12.5%</span> vs last month
      </span>
  </div>

  <div class="stat is-compact">
      <span class="stat-label">Open Issues</span>
      <span class="stat-value">37</span>
  </div>

Archetype: Slotted container (P3). Pure CSS, no JS. The slot
classes carry typography that existing utilities can't cleanly
combine (--stat-value's line-height: 1 + tight letter-spacing,
--stat-description's body line-height + muted color).

Semantic markup alternative: a <dl> can replace the plain
<span>s for explicit description-list semantics:
  <dl class="stat">
      <dt class="stat-label">Revenue</dt>
      <dd class="stat-value">$12,450</dd>
      <dd class="stat-description">...</dd>
  </dl>
brio's slot classes work on either markup. <dl> announces the
label-value relationship to assistive tech; consumers in
data-heavy contexts may prefer it.

Reference

Source: src/css/extras/stat.css

Applies to

.stat

Classes

Class	Kind	Description
`.is-compact`	variant	Tighter layout with smaller value for dense dashboard cards

Slots

Slot	Description
`& .stat-label`	Label text identifying the metric
`& .stat-value`	Large number or formatted value
`& .stat-description`	Supplementary text or trend indicator

Tokens

Token	Default	Description
`--stat-gap`	`var(--ui-gutter-tight)`	Gap between the label, value, and description slots
`--stat-label-font-size`	`var(--font-size-xs)`	Font size for the metric label
`--stat-value-font-size`	`var(--font-size-xl)`	Font size for the big number
`--stat-description-font-size`	`var(--font-size-xs)`	Font size for the supplementary description
`--stat-label-color`	`var(--color-text-muted)`	Text color for the label
`--stat-value-color`	`var(--color-text)`	Text color for the value