Stats Card

Displays key metrics and statistics in a compact card format.

Default

Stat cards with label, value, and change indicator.

html

Total Revenue

$45,231

+12.5% from last month

Total Users

2,350

+8.2% from last month

Bounce Rate

24.3%

-3.2% from last month 
<div class="uc-rounded-2xl uc-border uc-p-6">
  <p class="uc-text-sm uc-text-fg-disabled">Total Revenue</p>
  <p class="uc-text-2xl uc-font-bold uc-mt-1">$45,231</p>
  <span class="uc-text-xs uc-text-accents-blue">+12.5%</span>
</div>

With Icons

Stat cards with a decorative icon in a colored background.

html

Revenue

$45,231

+20.1%

Users

2,350

+15.3%

Engagement

68.7%

-2.4% 
<div class="uc-rounded-2xl uc-border uc-p-6">
  <div class="uc-flex uc-items-start uc-justify-between">
    <div>
      <p class="uc-text-sm uc-text-fg-disabled">Revenue</p>
      <p class="uc-text-2xl uc-font-bold uc-mt-1">$45,231</p>
    </div>
    <div class="uc-rounded-lg uc-bg-accents-blue/10 uc-p-3">
      <svg class="uc-w-5 uc-h-5 uc-text-accents-blue">...</svg>
    </div>
  </div>
  <div class="uc-flex uc-items-center uc-gap-1 uc-mt-3">
    <svg class="uc-w-3.5 uc-h-3.5 uc-text-accents-blue">...</svg>
    <span class="uc-text-xs uc-font-medium uc-text-accents-blue">+20.1%</span>
  </div>
</div>

Compact

Smaller stat cards in a 4-column layout for dashboards.

html

Revenue

$12.4k

+12.5%

Orders

1,463

+8.2%

Customers

894

-3.1%

Avg. Value

$84.50

+4.6% 
<div class="uc-grid uc-grid-cols-2 uc-sm:grid-cols-4 uc-gap-3">
  <div class="uc-rounded-2xl uc-border uc-p-4">
    <p class="uc-text-xs uc-text-fg-disabled">Revenue</p>
    <p class="uc-text-lg uc-font-bold uc-mt-0.5">$12.4k</p>
    <span class="uc-text-xs uc-font-medium uc-text-accents-blue">+12.5%</span>
  </div>
  <div class="uc-rounded-2xl uc-border uc-p-4">
    <p class="uc-text-xs uc-text-fg-disabled">Orders</p>
    <p class="uc-text-lg uc-font-bold uc-mt-0.5">1,463</p>
    <span class="uc-text-xs uc-font-medium uc-text-accents-blue">+8.2%</span>
  </div>
</div>

With Sparkline

Stat cards with a small inline SVG sparkline chart.

html

Revenue

$45,231

+20.1%

Users

2,350

+15.3%

Bounce Rate

24.3%

-3.2% 
<div class="uc-rounded-2xl uc-border uc-p-6">
  <p class="uc-text-sm uc-text-fg-disabled">Revenue</p>
  <p class="uc-text-2xl uc-font-bold uc-mt-1">$45,231</p>
  <div class="uc-mt-3">
    <svg class="uc-w-full uc-h-10" viewBox="0 0 120 40">
      <polyline points="0,35 30,25 60,22 90,10 120,8"
        stroke="hsl(var(--accents-blue))" stroke-width="2"
        fill="none" />
    </svg>
  </div>
  <div class="uc-flex uc-items-center uc-gap-1 uc-mt-2">
    <svg class="uc-w-3.5 uc-h-3.5 uc-text-accents-blue">...</svg>
    <span class="uc-text-xs uc-font-medium uc-text-accents-blue">+20.1%</span>
  </div>
</div>

With Progress

Stat cards with a progress bar showing completion.

html

Storage Used

75%

7.5 GB of 10 GB

Tasks Complete

42%

21 of 50 tasks

Monthly Goal

92%

$46k of $50k

<div class="uc-rounded-2xl uc-border uc-p-6">
  <p class="uc-text-sm uc-text-fg-disabled">Storage Used</p>
  <p class="uc-text-2xl uc-font-bold uc-mt-1">75%</p>
  <p class="uc-text-xs uc-text-fg-disabled uc-mt-1">7.5 GB of 10 GB</p>
  <div class="uc-mt-3">
    <div class="uc-w-full uc-bg-neutrals-subtle uc-rounded-full uc-h-1.5">
      <div class="uc-bg-accents-blue uc-h-1.5 uc-rounded-full" style="width:75%"></div>
    </div>
  </div>
</div>

Colored

Stat cards with colored left borders for visual categorization.

html

Revenue

$45,231

+20.1% from last month

Growth

+12.5%

+2.3% from last month

Engagement

68.7%

-1.8% from last month

Churn Rate

2.4%

+0.5% from last month 
<div class="uc-rounded-2xl uc-border uc-p-6 uc-border-l-4 uc-border-l-accents-blue">
  <p class="uc-text-sm uc-text-fg-disabled">Revenue</p>
  <p class="uc-text-2xl uc-font-bold uc-mt-1">$45,231</p>
  <div class="uc-flex uc-items-center uc-gap-1 uc-mt-2">
    <svg class="uc-w-3.5 uc-h-3.5 uc-text-accents-blue">...</svg>
    <span class="uc-text-xs uc-font-medium uc-text-accents-blue">+20.1%</span>
    <span class="uc-text-xs uc-text-fg-disabled uc-ml-1">from last month</span>
  </div>
</div>

API Reference

All CSS classes available for the Stats Card component.

Class Type Description
uc-rounded-2xl Base Card border radius for stat cards
uc-border uc-border-border-default Base Default card border
uc-p-6 Base Standard card padding
uc-p-4 Size Compact card padding for smaller variants
uc-text-2xl uc-font-bold Typography Main stat value styling
uc-text-lg uc-font-bold Typography Compact stat value styling
uc-text-sm uc-text-fg-disabled Typography Stat label text styling
uc-text-xs uc-font-medium uc-text-accents-blue Indicator Positive trend indicator text
uc-text-xs uc-font-medium uc-text-accents-red Indicator Negative trend indicator text
uc-bg-accents-blue/10 Modifier Tinted icon background container
uc-border-l-4 uc-border-l-accents-blue Modifier Colored left border accent for categorization
uc-bg-accents-blue uc-h-1.5 uc-rounded-full Progress Progress bar fill styling
uc-bg-neutrals-subtle uc-rounded-full uc-h-1.5 Progress Progress bar track styling

Accessibility

Keyboard and screen reader support.

Feature Details
Semantics Use dl/dt/dd elements for label-value pairs in stat cards
Updates Dynamic stat values should use aria-live="polite" for announcements
Icons Decorative trend icons should have aria-hidden="true"
Context Trend indicators need sr-only text like "Increased by 12%"