Metric Card

A single headline number with optional delta, period and description. Same content material as Card — a panel on the scene, not a variant of Stat.

Basic

Active members

30d

12,480+4.2%

Cancellations

30d

318-1.8%

<MetricCard
  label="Active members"
  value="12,480"
  delta="+4.2%"
  trend="up"
  period="30d"
/>

Sizes

Sites booked

842

Sites booked

842

Sites booked

842

<MetricCard size="sm" label="Sites booked" value="842" />
<MetricCard size="md" … />   {/* default */}
<MetricCard size="lg" … />

Accents

Accents use the same fill tint as Card. MetricCard deliberately opts out of the tone dot — its icon already owns the top-right corner, and the two would collide.

Revenue

$1.2M

Primary / action context

Retention

94%

Success / nature context

Open tickets

Info / secondary context

<MetricCard accent="ember" label="Revenue" value="$1.2M" />
<MetricCard accent="canopy" … />
<MetricCard accent="creek" … />

With an icon and description

Avg. stay length

QTD

3.4+0.2

Nights per reservation across all resorts.

Flat metric

1,0240.0%

Trend defaults to flat when no direction is given.

<MetricCard
  label="Avg. stay length"
  value="3.4"
  period="QTD"
  delta="+0.2"
  trend="up"
  description="Nights per reservation across all resorts."
  icon={<CalendarIcon />}
/>