Stat cards — Total with breakdown rows

A headline total and icon sit above three labelled share bars and an expandable counting note. Use it to show the composition of one metric without a full chart.

ReactHTML

1440 × 480

Open in new tab

Component.tsx20 lines

export default function StatCardBreakdownRows() {
  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-4">
        <dl><dt className="text-sm font-medium text-neutral-500">Metric label</dt><dd className="mt-1 text-4xl font-semibold tracking-tight tabular-nums">1,284</dd></dl>
        <span aria-hidden="true" className="flex size-10 shrink-0 items-center justify-center rounded-md bg-neutral-100 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-5"><path d="M4 6h16M4 12h10M4 18h6" /></svg></span>
      </header>
      <ul role="list" className="mt-2 grid gap-2">
        <li><p className="flex justify-between gap-3 text-xs text-neutral-600"><span>First group</span><span className="font-medium tabular-nums text-neutral-900">642 · 50%</span></p><div aria-hidden="true" className="mt-1 h-1.5 overflow-hidden rounded-full bg-neutral-100"><div className="h-full w-1/2 rounded-full bg-neutral-900"></div></div></li>
        <li><p className="flex justify-between gap-3 text-xs text-neutral-600"><span>Second group</span><span className="font-medium tabular-nums text-neutral-900">385 · 30%</span></p><div aria-hidden="true" className="mt-1 h-1.5 overflow-hidden rounded-full bg-neutral-100"><div className="h-full w-[30%] rounded-full bg-neutral-900"></div></div></li>
        <li><p className="flex justify-between gap-3 text-xs text-neutral-600"><span>Remaining group</span><span className="font-medium tabular-nums text-neutral-900">257 · 20%</span></p><div aria-hidden="true" className="mt-1 h-1.5 overflow-hidden rounded-full bg-neutral-100"><div className="h-full w-1/5 rounded-full bg-neutral-900"></div></div></li>
      </ul>
      <details className="group mt-3 border-t border-neutral-200 pt-2">
        <summary className="flex cursor-pointer list-none items-center justify-between gap-3 text-sm font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 [&::-webkit-details-marker]:hidden">How this is counted<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 shrink-0 transition-transform group-open:rotate-180"><path d="m6 9 6 6 6-6" /></svg></summary>
        <p className="mt-2 text-xs text-neutral-600">Each item is counted once.</p>
      </details>
    </article>
  )
}

Pattern notes

When to use: Use when one total has a short categorical breakdown and the counting method needs a note. Pick stat-card-bar-chart for changes over time or stat-card-joined-trio for separate peer metrics. Variations: use amounts instead of counts, show status categories, or replace the note with a short definition of the total.
Hierarchy: The total is 36px semibold with tabular digits, below a 14px medium label by 4px. Each 12px row aligns its category left and count plus percentage right. Decorative share bars show 50%, 30% and 20%, with the values repeated in text. The summary is 14px medium; its note is 12px. Slots: label up to 3 words, total up to 6 characters, row names up to 3 words, note one short sentence up to 6 words.
Responsive: Only the width changes at 640px. The icon remains beside the total, labels and counts stay in rows, and the bars fill the inner width at both sizes. The short note keeps the expanded card below 384px tall.
Layout: A 288px w-72 card, 320px sm:w-80 from 640px, with 24px p-6 padding, an 8px radius and a 1px border. The header places a label and total beside a 40px icon tile. A three-row list starts 8px below with 8px gaps. Each row has a label and count/share line, then a 6px h-1.5 bar with a 4px top gap. Details follows with 12px top margin, a divider and 8px top padding; the revealed note has an 8px margin.
States: The native details is closed initially and opens with mouse or keyboard. Its 16px chevron rotates 180 degrees on open with a 150ms transform transition. The summary shows a 2px neutral-900 focus-visible outline offset 2px. The list and bars are static, with no selected or disabled states.

Desktop wireframe

┌──────────────────────────────────────────────┐
│ Metric label                      ┌──────┐   │
│ 1,284                             │ Icon │   │
│                                   └──────┘   │
│ First group                     642 | 50%    │
│ ┌────────────────────┬───────────────────┐   │
│ │                    │                   │   │
│ └────────────────────┴───────────────────┘   │
│ Second group                    385 | 30%    │
│ ┌───────────┬────────────────────────────┐   │
│ │           │                            │   │
│ └───────────┴────────────────────────────┘   │
│ Remaining group                 257 | 20%    │
│ ┌───────┬────────────────────────────────┐   │
│ │       │                                │   │
│ └───────┴────────────────────────────────┘   │
│ ──────────────────────────────────────────   │
│ How this is counted                    v     │
└──────────────────────────────────────────────┘

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 — Total with breakdown rows

Pattern notes

More in Stat cards

Stat cards — Activity calendar

Stat cards — Benchmark range

Stat cards — Figure with bar chart