Stats

Flexible stat display primitives for dashboards and analytics pages. Compose a grouped stat bar or individual bordered cards using wf-stats and wf-stat . Supports value color variants, trend badges, figure slots, action areas, and responsive stacking on mobile.

Basic

Wrap one or more wf-stat items in a wf-stats container. Items are divided by a hairline and share equal width. Stacks to a column on narrow viewports.

Total Users

24,700

Active accounts

Monthly Revenue

$8,420

Billed this month

Open Tickets

142

Across all queues

Uptime

99.9%

Last 30 days

<div class="wf-stats">
  <div class="wf-stat">
    <p class="wf-stat-title">Total Users</p>
    <p class="wf-stat-value">24,700</p>
    <p class="wf-stat-desc">Active accounts</p>
  </div>
  <div class="wf-stat">
    <p class="wf-stat-title">Monthly Revenue</p>
    <p class="wf-stat-value">$8,420</p>
    <p class="wf-stat-desc">Billed this month</p>
  </div>
  <div class="wf-stat">
    <p class="wf-stat-title">Open Tickets</p>
    <p class="wf-stat-value">142</p>
    <p class="wf-stat-desc">Across all queues</p>
  </div>
</div>

Vertical

Add wf-stats-vertical to stack items top-to-bottom with horizontal dividers. Useful in a sidebar or narrow column.

Total Users

24,700

Active accounts

Monthly Revenue

$8,420

Billed this month

Open Tickets

142

Across all queues

<div class="wf-stats wf-stats-vertical">
  <div class="wf-stat">
    <p class="wf-stat-title">Total Users</p>
    <p class="wf-stat-value">24,700</p>
    <p class="wf-stat-desc">Active accounts</p>
  </div>
  <div class="wf-stat">…</div>
</div>

Border Variant

Add wf-stats-border to remove the shared container box. Each stat becomes an individual bordered card with a drop shadow — ideal for a dashboard grid.

Total Users

24,700

Active accounts

Monthly Revenue

$8,420

Billed this month

Open Tickets

142

Across all queues

Uptime

99.9%

Last 30 days

<div class="wf-stats wf-stats-border">
  <div class="wf-stat">
    <p class="wf-stat-title">Total Users</p>
    <p class="wf-stat-value">24,700</p>
    <p class="wf-stat-desc">Active accounts</p>
  </div>
  <div class="wf-stat">…</div>
</div>

Figure Slot

Add a wf-stat-figure for an icon or image. Add wf-stat-has-figure to the stat item to place the figure beside the text, and wrap the text parts in wf-stat-body . Use wf-stat-icon or wf-stat-icon-rounded inside the figure for a shaped container.

Circle icon

Use wf-stat-icon inside the figure for a circular icon container.

Total Users

24,700

Active accounts

Tasks Done

1,893

This quarter

Alerts

7

Needs review

<div class="wf-stats wf-stats-border">
  <div class="wf-stat wf-stat-has-figure">
    <div class="wf-stat-figure">
      <div class="wf-stat-icon wf-bg-primary-inverted">
        <i class="icon users wf-text-primary" aria-hidden="true"></i>
      </div>
    </div>
    <div class="wf-stat-body">
      <p class="wf-stat-title">Total Users</p>
      <p class="wf-stat-value">24,700</p>
      <p class="wf-stat-desc">Active accounts</p>
    </div>
  </div>
</div>

Rounded icon

Use wf-stat-icon-rounded for a rounded-rectangle container instead.

Reviews

4.9

Average rating

Storage

84 GB

Of 200 GB used

Events

38

Scheduled this month

<div class="wf-stat wf-stat-has-figure">
  <div class="wf-stat-figure">
    <div class="wf-stat-icon-rounded wf-bg-primary-inverted">
      <i class="icon star wf-text-primary" aria-hidden="true"></i>
    </div>
  </div>
  <div class="wf-stat-body">
    <p class="wf-stat-title">Reviews</p>
    <p class="wf-stat-value">4.9</p>
    <p class="wf-stat-desc">Average rating</p>
  </div>
</div>

Trend Badges

Use wf-stat-trend with wf-stat-trend-up , wf-stat-trend-down , or wf-stat-trend-neutral inside wf-stat-desc for a colored badge.

Total Users

24,700

↗ 12% vs last month

Bounce Rate

38.4%

↘ 4% vs last month

Avg. Session

3m 12s

→ 0% unchanged

<div class="wf-stat">
  <p class="wf-stat-title">Total Users</p>
  <p class="wf-stat-value">24,700</p>
  <p class="wf-stat-desc">
    <span class="wf-stat-trend wf-stat-trend-up">↗ 12%</span> vs last month
  </p>
</div>

<!-- Variants -->
<span class="wf-stat-trend wf-stat-trend-up">↗ 12%</span>
<span class="wf-stat-trend wf-stat-trend-down">↘ 4%</span>
<span class="wf-stat-trend wf-stat-trend-neutral">→ 0%</span>

Value Colors

Apply a semantic color modifier to any wf-stat to color the value text using the corresponding design token.

Primary

24,700

wf-stat-primary

Positive

+18.4%

wf-stat-positive

Negative

-6.2%

wf-stat-negative

Alert

7

wf-stat-alert

Info

142

wf-stat-info

Secondary

99.9%

wf-stat-secondary

<div class="wf-stat wf-stat-primary">…</div>
<div class="wf-stat wf-stat-positive">…</div>
<div class="wf-stat wf-stat-negative">…</div>
<div class="wf-stat wf-stat-alert">…</div>
<div class="wf-stat wf-stat-info">…</div>
<div class="wf-stat wf-stat-secondary">…</div>

Centered

Add wf-stat-center to a stat item to center-align its content. Pair with a figure above the text for a card-style metric.

Total Users

24,700

↗ 12%

Resolved

1,893

↗ 8%

Churned

47

↘ 2%

Avg. Response

4m 20s

→ 0%

<div class="wf-stat wf-stat-center">
  <div class="wf-stat-figure">
    <div class="wf-stat-icon wf-bg-primary-tint">
      <i class="icon users wf-text-primary" aria-hidden="true"></i>
    </div>
  </div>
  <p class="wf-stat-title">Total Users</p>
  <p class="wf-stat-value">24,700</p>
  <p class="wf-stat-desc">
    <span class="wf-stat-trend wf-stat-trend-up">↗ 12%</span>
  </p>
</div>

Actions

Add a wf-stat-actions slot below the value for buttons, links, or inline inputs.

Storage Used

84 GB

Of 200 GB total

Upgrade Details

API Calls

1.2M

This billing cycle

View logs

Team Members

18

3 invites pending

<div class="wf-stat">
  <p class="wf-stat-title">Storage Used</p>
  <p class="wf-stat-value">84 GB</p>
  <p class="wf-stat-desc">Of 200 GB total</p>
  <div class="wf-stat-actions">
    <a href="#" class="wf-button wf-button-sm wf-button-primary">Upgrade</a>
    <a href="#" class="wf-button wf-button-sm">Details</a>
  </div>
</div>
<!-- wf-stat-actions with progress bar -->
<div class="wf-stat-actions">
    <div class="wf-progress-wrap wf-progress-striped">
        <div class="wf-progress" style="--wf-progress-value:75%;">
            <div class="wf-progress-bar wf-progress-positive"></div>
        </div>
    </div>
</div>

Custom Properties

Property	Default	Description
--wf-surface	#fff	Background color of the stats’ container and border-variant cards.
--wf-border	#e5e7eb	Color of the container border and dividers between stat items.
--wf-text	#252f4a	Default color of the stat value.
--wf-text-muted	#6b7280	Color of title and description text.
--wf-radius-control	var(--wf-radius-4)	Border radius of the stats’ container and icon containers.

Class Reference

Class	Type	Description
wf-stats	Base	Container. Renders as a flex row with a shared bordered box and dividers between stat items. Stacks to a column on mobile.
wf-stat	Base	Individual stat item. Flex-grows to fill equal width. Holds title, value, desc, figure, and actions slots.
wf-stat-title	Part	Small uppercase label above the value.
wf-stat-value	Part	The main large number or text. Bold 2rem by default.
wf-stat-desc	Part	Secondary descriptive text or trend line below the value.
wf-stat-figure	Part	Icon, image, or graphic slot. Centered, 2rem font size.
wf-stat-icon	Part	Circle icon container (3rem, full border-radius) inside a figure slot.
wf-stat-icon-rounded	Part	Rounded-rectangle icon container (3rem, control border-radius) inside a figure slot.
wf-stat-body	Part	Flex-column wrapper for title + value + desc. Required when using wf-stat-has-figure for side-by-side layout.
wf-stat-actions	Part	Flex-wrap slot for buttons or inputs below the value.
wf-stat-trend	Part	Trend badge inline element. Use with wf-stat-trend-up · wf-stat-trend-down · or wf-stat-trend-neutral .
wf-stats-vertical	Modifier	Stacks stat items top-to-bottom with horizontal dividers.
wf-stats-border	Modifier	Removes the shared box; each stat becomes an individual bordered card with a drop shadow.
wf-stats-sm	Modifier	Reduces value font size and weight for a more compact display.
wf-stat-center	Modifier	Center-aligns all content within a stat item.
wf-stat-has-figure	Modifier	Switches the stat item to a flex row so the figure sits beside the text body.
wf-stat-*	Modifier	Colors the wf-stat-value text using the corresponding semantic color token primary · positive · negative · alert · nfo · secondary .