Stat cards — Three metrics in one panel

Three linked metrics share a panel, appearing as rows on mobile and equal columns on desktop. Use it for a related group of dashboard figures with one reporting period.

ReactHTML

1440 × 480

Open in new tab

Component.tsx25 lines

export default function StatCardJoinedTrio() {
  return (
    <section aria-label="Three metric summary" className="w-72 overflow-hidden rounded-lg border border-neutral-200 bg-white text-neutral-900 md:w-[40rem]">
      <header className="flex items-center justify-between gap-3 border-b border-neutral-200 px-6 py-4">
        <h2 className="text-sm font-medium">Last 7 days</h2>
        <p className="text-xs text-neutral-500">Mar 08 - 14</p>
      </header>
      <ul role="list" className="grid md:grid-cols-3">
        <li className="relative flex items-center justify-between gap-3 px-6 py-4 hover:bg-neutral-50 md:block md:border-t-0 md:p-6">
          <dl><dt><a href="#" className="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 after:absolute after:inset-0">Metric one</a></dt><dd className="mt-1 text-3xl font-semibold tracking-tight tabular-nums md:mt-2">1,284</dd></dl>
          <p className="inline-flex shrink-0 items-center gap-1 rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium md:mt-4"><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 4.1%</p>
        </li>
        <li className="relative flex items-center justify-between gap-3 border-t border-neutral-200 px-6 py-4 hover:bg-neutral-50 md:block md:border-t-0 md:p-6 md:border-l">
          <dl><dt><a href="#" className="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 after:absolute after:inset-0">Metric two</a></dt><dd className="mt-1 text-3xl font-semibold tracking-tight tabular-nums md:mt-2">742</dd></dl>
          <p className="inline-flex shrink-0 items-center gap-1 rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium md:mt-4"><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 14 5 5 5-5M12 19V5" /></svg>Down 2%</p>
        </li>
        <li className="relative flex items-center justify-between gap-3 border-t border-neutral-200 px-6 py-4 hover:bg-neutral-50 md:block md:border-t-0 md:p-6 md:border-l">
          <dl><dt><a href="#" className="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 after:absolute after:inset-0">Metric three</a></dt><dd className="mt-1 text-3xl font-semibold tracking-tight tabular-nums md:mt-2">98%</dd></dl>
          <p className="inline-flex shrink-0 items-center gap-1 rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium md:mt-4"><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 1 point</p>
        </li>
      </ul>
    </section>
  )
}

Pattern notes

When to use: Use for three related metrics sharing one reporting period. Pick stat-card-icon-inline for independent compact cards or stat-card-breakdown-rows when three numbers are portions of one total. Variations: show a count, amount and rate; change the period to a month; or link each cell to its own report.
Hierarchy: The header is 14px medium with a 12px date range. Each metric has a 14px linked label above a 30px semibold tabular value; the value gap is 4px on mobile and 8px from 768px. An outlined 12px directional pill sits at the right on mobile and 16px below the value on desktop. Slots: labels up to 2 words, figures up to 6 characters, change text up to 3 words, date range up to 12 characters.
Responsive: Below 768px, a 288px panel stacks three horizontal metric rows with the badge right of the figure column. At 768px, a 640px panel uses three equal columns, the badges move below the figures, padding grows to 24px, and horizontal dividers become vertical ones. The header stays a single row at both widths.
Layout: A 288px w-72 bordered panel with an 8px rounded-lg radius and clipped corners. At 768px md:w-[40rem] makes it 640px wide. The header has 24px side padding, 16px vertical padding and a space-between period/date row. Below, a three-item list has rows with 24px side and 16px vertical padding, each divided by a hairline. From 768px the list forms three equal columns with 24px p-6 cells and vertical dividers.
States: Each label link has an absolute inset-0 after pseudo-element covering its cell. Hover fills that cell neutral-50 and changes the label to neutral-600. Each link shows a 2px neutral-900 focus-visible outline offset 2px. Deltas include arrow glyphs and Up or Down wording. There are no open, selected or disabled states.

Desktop wireframe

┌───────────────────────────────────────────────┐
│ Last 7 days                  Mar 08 - 14      │
├───────────────┬───────────────┬───────────────┤
│ [Metric one]  │ [Metric two]  │ [Metric 3]    │
│ 1,284         │ 742           │ 98%           │
│ [^ Up 4.1%]   │ [v Down 2%]   │ [^ Up 1pt]    │
└───────────────┴───────────────┴───────────────┘

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 — Three metrics in one panel

Pattern notes

More in Stat cards

Stat cards — Activity calendar

Stat cards — Benchmark range

Stat cards — Figure with bar chart