Stat cards — Progress toward a target

A current value shares a baseline with its target above a horizontal progress bar and remaining amount. Use it for a bounded goal with a clear total and deadline.

ReactHTML

1440 × 480

Open in new tab

Component.tsx16 lines

export default function StatCardProgressTarget() {
  return (
    <article className="w-72 rounded-lg border border-neutral-200 bg-white p-6 text-neutral-900 sm:w-80">
      <dl>
        <dt className="flex items-center justify-between gap-3 text-sm font-medium text-neutral-500"><span>Metric label</span><span className="text-xs font-normal">This month</span></dt>
        <dd className="mt-4 flex items-baseline gap-2"><span className="text-3xl font-semibold tracking-tight tabular-nums">7,420</span><span className="text-xs text-neutral-500">/ 10,000 target</span></dd>
      </dl>
      <div role="progressbar" aria-label="Metric target progress" aria-valuemin={0} aria-valuemax={10000} aria-valuenow={7420} aria-valuetext="7,420 of 10,000, 74.2 percent" className="mt-5 h-2 overflow-hidden rounded-full bg-neutral-200">
        <div className="h-full w-[74.2%] rounded-full bg-neutral-900"></div>
      </div>
      <p className="mt-2 flex justify-between text-xs tabular-nums text-neutral-500"><span>0</span><span>10,000</span></p>
      <footer className="mt-5 flex justify-between gap-3 border-t border-neutral-200 pt-4 text-xs text-neutral-600"><span>2,580 to go</span><span>9 days left</span></footer>
    </article>
  )
}

Pattern notes

When to use: Use for a count approaching a fixed goal within a period. Pick stat-card-ring-gauge when a percentage needs comparison totals, or stat-card-bar-chart to show a trend. Variations: use a currency target, show a weekly deadline, or replace the countdown with the completion date.
Hierarchy: The current figure is 30px semibold with tabular digits; the target is 12px neutral-500. The label is 14px medium and the period, scale and remainder are 12px. A labelled progressbar exposes minimum 0, maximum 10,000 and current value 7,420 with a spoken percentage. Slots: label up to 3 words, period up to 3, current and target up to 6 characters each, remainder and time up to 4 words each.
Responsive: Only the root width changes at 640px, from 288px to 320px. The value and target remain on one baseline, the progress bar spans the available inner width, and the scale and footer stay in two-ended rows.
Layout: A 288px w-72 card, 320px sm:w-80 from 640px, with 24px p-6 padding, a 1px border and an 8px radius. A space-between header holds the label and period. The current figure and target share a baseline 16px below with an 8px gap. The progress bar starts 20px later, is 8px h-2 tall, and fills 74.2% of a rounded neutral-200 track. Scale labels sit 8px below. The footer has a 20px margin, divider and 16px top padding.
States: The progress display is static and noninteractive. There are no hover, focus, open, selected or disabled states. The current and target figures remain available as text when the track and fill are repainted in forced colours.

Desktop wireframe

┌──────────────────────────────────────────────┐
│ Metric label                  This month     │
│ 7,420 / 10,000 target                        │
│                                              │
│ ┌─────────────────────────────┬──────────┐   │
│ │            74.2%            │          │   │
│ └─────────────────────────────┴──────────┘   │
│ 0                                  10,000    │
│ ──────────────────────────────────────────   │
│ 2,580 to go             9 days left          │
└──────────────────────────────────────────────┘

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 — Progress toward a target

Pattern notes

More in Stat cards

Stat cards — Activity calendar

Stat cards — Benchmark range

Stat cards — Figure with bar chart