Stat cards — Stage funnel

Three sequential stage totals descend beneath an overall conversion figure. Use it to expose where a process narrows.

ReactHTML

1440 × 480

Component.tsx38 lines

export default function StatCardStageFunnel() {
  return (
    <article className="w-72 rounded-lg border border-neutral-200 bg-white p-6 text-neutral-900 sm:w-80">
      <h3 className="text-sm font-medium text-neutral-500">Conversion through stages</h3>
      <p className="mt-2 text-3xl font-semibold tracking-tight">18.5%<span className="ml-2 text-xs font-normal text-neutral-500">overall</span></p>
      <ol role="list" className="mt-6 grid gap-4">
        <li>
          <div className="flex justify-between gap-3 text-xs">
            <span className="text-neutral-600">Started</span>
            <span className="font-semibold tabular-nums">1,284</span>
          </div>
          <div aria-hidden="true" className="mt-2 h-3 rounded-full border border-neutral-200 bg-neutral-100">
            <div className="h-full w-full rounded-full bg-neutral-900"></div>
          </div>
        </li>
        <li>
          <div className="flex justify-between gap-3 text-xs">
            <span className="text-neutral-600">Qualified</span>
            <span className="font-semibold tabular-nums">642</span>
          </div>
          <div aria-hidden="true" className="mt-2 h-3 rounded-full border border-neutral-200 bg-neutral-100">
            <div className="h-full w-1/2 rounded-full bg-neutral-900"></div>
          </div>
        </li>
        <li>
          <div className="flex justify-between gap-3 text-xs">
            <span className="text-neutral-600">Completed</span>
            <span className="font-semibold tabular-nums">238</span>
          </div>
          <div aria-hidden="true" className="mt-2 h-3 rounded-full border border-neutral-200 bg-neutral-100">
            <div className="h-full w-[18.5%] rounded-full bg-neutral-900"></div>
          </div>
        </li>
      </ol>
      <p className="mt-5 text-xs text-neutral-500">Three sequential stages in the same period</p>
    </article>
  )
}

Pattern notes

When to use: Use for a process with three ordered stages. Choose breakdown rows for independent parts of a total. Variations include an additional stage or a completion ratio per row.
Hierarchy: Read the overall conversion and the ordered stage sequence. Keep metric title below 4 words, stage labels below 2, counts below 7 characters and note below 10 words.
Responsive: The ordered rows and flexible tracks remain stacked at every width. The root expands at 640px.
Layout: The bordered white root is 288px w-72 wide with an 8px rounded-lg radius. The root uses 24px padding and becomes 320px sm:w-80 from 640px. A 30px conversion figure sits above three 16px-separated rows. Each has a labelled count and a 12px bordered track 8px below. The final note follows by 20px.
States: All content is static; figures have no selected, disabled or loading state. Labels and counts remain readable when forced colours remove relative fills.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│ Conversion through stages                                    │
│ 18.5% overall                                                │
│ Started                         1,284                        │
│ [==================================================]         │
│ Qualified                         642                        │
│ [========================]                                   │
│ Completed                         238                        │
│ [=========]                                                  │
│ Three stages in the same period                              │
└──────────────────────────────────────────────────────────────┘

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 — Stage funnel

Pattern notes

More in Stat cards

Stat cards — Activity calendar

Stat cards — Benchmark range

Stat cards — Figure with bar chart