Stat cards — Icon, label and value row

An icon tile, a label and figure, and a directional change badge share one compact row. Use it for stacked dashboard summaries or a row of short metrics.

ReactHTML

1440 × 480

Open in new tab

Component.tsx15 lines

export default function StatCardIconInline() {
  return (
    <article className="flex w-72 items-center gap-3 rounded-lg border border-neutral-200 bg-white p-6 text-neutral-900 sm:w-[22rem]">
      <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 19V9m8 10V5m8 14v-7" /></svg>
      </span>
      <dl className="min-w-0 flex-1">
        <dt className="truncate text-sm font-medium text-neutral-500">Metric label</dt>
        <dd className="mt-1 text-2xl font-semibold tracking-tight tabular-nums">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"><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>
    </article>
  )
}

Pattern notes

When to use: Use for a compact metric in a dashboard stack or row. Pick stat-card-figure-delta when the metric needs a report link, or stat-card-joined-trio when three related metrics share a panel. Variations: swap the glyph to match the metric, show a negative delta with Down, or use a currency value.
Hierarchy: The 24px semibold tabular value leads below a 14px medium label with a 4px gap. The 40px neutral-100 rounded-md icon tile contains a decorative 20px stroke glyph. A 12px outlined pill reads Up 4.1% beside an arrow. Slots: label up to 3 words, value up to 6 characters, delta up to 8 characters.
Responsive: The three regions stay in one row at every width. Only the root width changes at 640px, from 288px to 352px. The middle label truncates instead of wrapping; the icon and badge keep their widths.
Layout: A flex row in a 288px-wide w-72 card, 352px sm:w-[22rem] from 640px. The card has 24px p-6 padding, a 1px neutral-200 border and an 8px rounded-lg radius. A fixed 40px icon tile, flexible min-w-0 definition list and nonshrinking change badge are vertically centred with 12px gap-3 gaps.
States: The card is static with no hover, focus, open, selected or disabled controls. The icon is aria-hidden. The change uses both an up arrow and the word Up, so direction is readable without colour.

Desktop wireframe

┌──────────────────────────────────────────────┐
│ ┌──────┐  Metric label       [^ Up 4.1%]     │
│ │ Icon │  1,284                              │
│ └──────┘                                     │
└──────────────────────────────────────────────┘

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 — Icon, label and value row

Pattern notes

More in Stat cards

Stat cards — Activity calendar

Stat cards — Benchmark range

Stat cards — Figure with bar chart