v1.0.0

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="vt-rounded-2xl vt-border vt-p-6">
  <p class="vt-text-sm vt-text-mains-quaternary">Total Revenue</p>
  <p class="vt-text-2xl vt-font-bold vt-mt-1">$45,231</p>
  <span class="vt-text-xs vt-text-info-primary">+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="vt-rounded-2xl vt-border vt-p-6">
  <div class="vt-flex vt-items-start vt-justify-between">
    <div>
      <p class="vt-text-sm vt-text-mains-quaternary">Revenue</p>
      <p class="vt-text-2xl vt-font-bold vt-mt-1">$45,231</p>
    </div>
    <div class="vt-rounded-lg vt-bg-info-primary/10 vt-p-3">
      <svg class="vt-w-5 vt-h-5 vt-text-info-primary">...</svg>
    </div>
  </div>
  <div class="vt-flex vt-items-center vt-gap-1 vt-mt-3">
    <svg class="vt-w-3.5 vt-h-3.5 vt-text-info-primary">...</svg>
    <span class="vt-text-xs vt-font-medium vt-text-info-primary">+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="vt-grid vt-grid-cols-2 vt-sm:grid-cols-4 vt-gap-3">
  <div class="vt-rounded-2xl vt-border vt-p-4">
    <p class="vt-text-xs vt-text-mains-quaternary">Revenue</p>
    <p class="vt-text-lg vt-font-bold vt-mt-0.5">$12.4k</p>
    <span class="vt-text-xs vt-font-medium vt-text-info-primary">+12.5%</span>
  </div>
  <div class="vt-rounded-2xl vt-border vt-p-4">
    <p class="vt-text-xs vt-text-mains-quaternary">Orders</p>
    <p class="vt-text-lg vt-font-bold vt-mt-0.5">1,463</p>
    <span class="vt-text-xs vt-font-medium vt-text-info-primary">+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="vt-rounded-2xl vt-border vt-p-6">
  <p class="vt-text-sm vt-text-mains-quaternary">Revenue</p>
  <p class="vt-text-2xl vt-font-bold vt-mt-1">$45,231</p>
  <div class="vt-mt-3">
    <svg class="vt-w-full vt-h-10" viewBox="0 0 120 40">
      <polyline points="0,35 30,25 60,22 90,10 120,8"
        stroke="hsl(var(--info-primary))" stroke-width="2"
        fill="none" />
    </svg>
  </div>
  <div class="vt-flex vt-items-center vt-gap-1 vt-mt-2">
    <svg class="vt-w-3.5 vt-h-3.5 vt-text-info-primary">...</svg>
    <span class="vt-text-xs vt-font-medium vt-text-info-primary">+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="vt-rounded-2xl vt-border vt-p-6">
  <p class="vt-text-sm vt-text-mains-quaternary">Storage Used</p>
  <p class="vt-text-2xl vt-font-bold vt-mt-1">75%</p>
  <p class="vt-text-xs vt-text-mains-quaternary vt-mt-1">7.5 GB of 10 GB</p>
  <div class="vt-mt-3">
    <div class="vt-w-full vt-bg-surfaces-subtle vt-rounded-full vt-h-1.5">
      <div class="vt-bg-info-primary vt-h-1.5 vt-rounded-full vt-inline-c311217ce1"></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="vt-rounded-2xl vt-border vt-p-6 vt-border-l-4 vt-border-l-info-primary">
  <p class="vt-text-sm vt-text-mains-quaternary">Revenue</p>
  <p class="vt-text-2xl vt-font-bold vt-mt-1">$45,231</p>
  <div class="vt-flex vt-items-center vt-gap-1 vt-mt-2">
    <svg class="vt-w-3.5 vt-h-3.5 vt-text-info-primary">...</svg>
    <span class="vt-text-xs vt-font-medium vt-text-info-primary">+20.1%</span>
    <span class="vt-text-xs vt-text-mains-quaternary vt-ml-1">from last month</span>
  </div>
</div>

API Reference

All CSS classes available for the Stats Card component.

Class Type Description
vt-rounded-2xl Base Card border radius for stat cards
vt-border vt-border-border-default Base Default card border
vt-p-6 Base Standard card padding
vt-p-4 Size Compact card padding for smaller variants
vt-text-2xl vt-font-bold Typography Main stat value styling
vt-text-lg vt-font-bold Typography Compact stat value styling
vt-text-sm vt-text-mains-quaternary Typography Stat label text styling
vt-text-xs vt-font-medium vt-text-info-primary Indicator Positive trend indicator text
vt-text-xs vt-font-medium vt-text-error-primary Indicator Negative trend indicator text
vt-bg-info-primary/10 Modifier Tinted icon background container
vt-border-l-4 vt-border-l-info-primary Modifier Colored left border accent for categorization
vt-bg-info-primary vt-h-1.5 vt-rounded-full Progress Progress bar fill styling
vt-bg-surfaces-subtle vt-rounded-full vt-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%"
Built with:
Icons Badge