Stat cards — Figure with change and link

A single metric above an explicit change badge and a report link in a divided footer. Use it for a dashboard figure that needs a comparison and a route to detail.

ReactHTML

1440 × 480

Open in new tab

Component.tsx18 lines

export default function StatCardFigureDelta() {
  return (
    <article className="w-72 rounded-lg border border-neutral-200 bg-white p-6 text-neutral-900 sm:w-80">
      <dl>
        <dt className="text-sm font-medium text-neutral-500">Metric label</dt>
        <dd className="mt-2 text-4xl font-semibold tracking-tight tabular-nums">$48,290</dd>
      </dl>
      <p className="mt-3 flex flex-wrap items-center gap-2 text-xs text-neutral-500">
        <span className="inline-flex items-center gap-1 rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-3 shrink-0"><path d="m7 10 5-5 5 5M12 5v14" /></svg>Up 12.4%</span>
        <span>vs last period</span>
      </p>
      <footer className="mt-5 border-t border-neutral-200 pt-4">
        <a href="#" className="inline-flex items-center gap-2 text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">View report<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4"><path d="M5 12h14m-5-5 5 5-5 5" /></svg></a>
      </footer>
    </article>
  )
}

Pattern notes

When to use: Use for a headline metric with a comparison and a detailed report. Pick stat-card-icon-inline for a compact dashboard row or stat-card-bar-chart for a trend over several periods. Variations: use a count instead of currency, show Down with a down arrow, or compare with the previous week.
Hierarchy: Read the 36px semibold, tracking-tight, tabular figure first, then the 14px medium metric label, 12px delta badge and comparison text. The footer link is 14px medium. Slots: label up to 3 words, figure up to 8 characters, change up to 10 characters, comparison up to 4 words, link up to 3 words.
Responsive: Below 640px the card is 288px wide; at 640px it becomes 320px. Padding, typography and vertical rhythm stay unchanged. The delta and comparison row wraps if replacement text needs more room.
Layout: A 288px-wide w-72 card, 320px sm:w-80 from 640px, with 24px p-6 padding, a 1px neutral-200 border and an 8px rounded-lg radius. A definition list holds the label and value with an 8px gap. The change row starts 12px below the value, with an 8px gap. A footer has a 20px top margin, hairline divider and 16px top padding.
States: The report link changes from neutral-900 to neutral-600 on hover and has a 2px neutral-900 focus-visible outline offset 2px. The badge uses an arrow and the word Up to convey direction without colour. The figure and comparison are static; there are no open, selected or disabled states.

Desktop wireframe

┌──────────────────────────────────────────────┐
│ Metric label                                 │
│ $48,290                                      │
│ [^ Up 12.4%]  vs last period                 │
│ ────────────────────────────────────────     │
│ [View report]                         >      │
└──────────────────────────────────────────────┘

View all

Stat cards — Activity calendar
Layout tags: grid,numbers,compact
Stat cards — Benchmark range
Layout tags: numbers,compact
Stat cards — Figure with bar chart
Layout tags: stacked,numbers

Stat cards — Figure with change and link

Pattern notes

More in Stat cards

Stat cards — Activity calendar

Stat cards — Benchmark range

Stat cards — Figure with bar chart