Stat

A data display card for KPIs, metrics, and dashboard numbers.

Preview

Total Users 12,847

Revenue $4.2M

Usage

<div class="glass-stat">
  <span class="stat-label">Total Users</span>
  <span class="stat-value">12,847</span>
  <div class="stat-footer">
    <span>Last 30 days</span>
    <span class="stat-trend up">↑ 12.5%</span>
  </div>
</div>

Structure

Element / Class	Purpose
`.glass-stat`	Outer container with glass material
`.stat-label`	Small uppercase label (`0.8rem`, weight `700`)
`.stat-value`	Large metric number (`2.25rem`, weight `800`)
`.stat-footer`	Bottom row with flex space-between
`.stat-trend`	Trend indicator text (weight `600`)
`.stat-trend.up`	Green color (`--glass-success`)
`.stat-trend.down`	Red color (`--glass-error`)

CSS Details

Property	Value
Border Radius	`var(--glass-radius-lg)` (22px)
Padding	`1.5rem`
Layout	Flex column, `gap: 0.5rem`
Value font	`-0.03em` letter spacing, vibrant text mixin

Compatible Modifiers

.thin / .thick — material weight
.vibrant — accent tint
.glow — outer accent glow