Stat cards — Ring gauge beside summary

A percentage ring and comparison sit side by side above two totals and a report link. Use it for a rate that needs both a quick visual and supporting counts.

ReactHTML

1440 × 480

Open in new tab

Component.tsx32 lines

export default function StatCardRingGauge() {
  return (
    <article className="w-72 rounded-lg border border-neutral-200 bg-white p-6 text-neutral-900 sm:w-80">
      <header className="flex items-center justify-between gap-3">
        <h2 className="text-sm font-medium text-neutral-500">Metric label</h2>
        <span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">On track</span>
      </header>
      <div className="mt-3 flex items-center gap-4">
        <div className="relative size-24 shrink-0">
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="size-24 -rotate-90">
            <circle cx="12" cy="12" r="10" className="text-neutral-200" />
            <circle cx="12" cy="12" r="10" pathLength="100" strokeDasharray="98 100" className="text-neutral-900" />
          </svg>
          <p className="absolute inset-0 flex items-center justify-center text-2xl font-semibold tabular-nums">98%</p>
        </div>
        <div className="min-w-0">
          <p className="text-sm text-neutral-600">Comparison summary</p>
          <p className="mt-2 flex items-center gap-1 text-xs font-medium"><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 2 points</p>
          <p className="mt-1 text-xs text-neutral-500">vs previous period</p>
        </div>
      </div>
      <footer className="mt-3 border-t border-neutral-200 pt-2">
        <dl className="grid grid-cols-2 gap-4">
          <div className="flex flex-col"><dt className="order-2 text-xs text-neutral-500">Passed</dt><dd className="text-lg font-semibold tabular-nums">1,184</dd></div>
          <div className="flex flex-col"><dt className="order-2 text-xs text-neutral-500">Failed</dt><dd className="text-lg font-semibold tabular-nums">26</dd></div>
        </dl>
        <a href="#" className="mt-2 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 completion or pass rate that needs the underlying counts. Pick stat-card-progress-target for a current count and goal, or stat-card-figure-delta for a figure without a gauge. Variations: show completion and remaining counts, use three comparison lines, or change the status wording with the rate.
Hierarchy: The 24px semibold centred percentage leads. Two 24x24 SVG circles with r=10 and 1.5 strokes scale to 96px; pathLength=100 and dasharray=98 100 draw the neutral-900 arc on a neutral-200 track. The SVG is hidden from assistive technology and 98% remains text. Comparisons are 14px and 12px; totals are 18px semibold above 12px labels. Slots: title up to 3 words, status up to 2, comparison up to 3, totals up to 5 characters each.
Responsive: The width changes from 288px to 320px at 640px. The 96px ring and comparison stay side by side at both widths; the comparison wraps in its min-w-0 column. Totals keep two equal columns and all type and spacing stay fixed.
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 contains a title and status pill. The summary starts 12px below, with a 96px size-24 ring and a flexible text column separated by 16px. A divided footer starts 12px later with 8px top padding, a two-column definition list with a 16px gap, and a report link 8px below.
States: The report link changes to neutral-600 on hover and shows a 2px neutral-900 focus-visible outline offset 2px. The gauge is static. Up and its arrow show comparison direction; On track supplies a textual status. There are no open, selected or disabled states.

Desktop wireframe

┌──────────────────────────────────────────────┐
│ Metric label                  [On track]     │
│ ┌──────────┐  Comparison summary             │
│ │   98%    │  ^ Up 2 points                  │
│ │   Ring   │  vs previous period             │
│ └──────────┘                                 │
│ ────────────────────────────────────────     │
│ 1,184                 26                     │
│ Passed                Failed                 │
│ [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 — Ring gauge beside summary

Pattern notes

More in Stat cards

Stat cards — Activity calendar

Stat cards — Benchmark range

Stat cards — Figure with bar chart