Stat cards — Ranked contributor list

A total leads three ranked names with counts and an all-contributors link. Use it when readers need to identify the main contributors to a metric.

ReactHTML

1440 × 480

Open in new tab

Component.tsx28 lines

export default function StatCardRankedContributors() {
  return (
    <article className="w-72 rounded-lg border border-neutral-200 bg-white p-6 text-neutral-900 sm:w-80">
      <header>
        <h3 className="text-sm font-medium text-neutral-500">Leading contributors</h3>
        <p className="mt-1 text-3xl font-semibold tracking-tight tabular-nums">1,284<span className="ml-2 text-xs font-normal text-neutral-500">total</span></p>
      </header>
      <ol role="list" className="mt-5 border-t border-neutral-200">
        <li className="flex items-center gap-3 border-b border-neutral-200 py-3">
          <span className="font-mono text-xs text-neutral-500">01</span>
          <span className="min-w-0 flex-1 text-sm font-medium">Alex Rivera</span>
          <span className="text-sm font-semibold tabular-nums">482</span>
        </li>
        <li className="flex items-center gap-3 border-b border-neutral-200 py-3">
          <span className="font-mono text-xs text-neutral-500">02</span>
          <span className="min-w-0 flex-1 text-sm font-medium">Jordan Lee</span>
          <span className="text-sm font-semibold tabular-nums">351</span>
        </li>
        <li className="flex items-center gap-3 border-b border-neutral-200 py-3">
          <span className="font-mono text-xs text-neutral-500">03</span>
          <span className="min-w-0 flex-1 text-sm font-medium">Sam Kim</span>
          <span className="text-sm font-semibold tabular-nums">208</span>
        </li>
      </ol>
      <a href="#" className="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 mt-4 inline-block text-xs">View all contributors</a>
    </article>
  )
}

Pattern notes

When to use: Use for ownership or contribution breakdowns. Choose share bars when group proportions matter more than names. Variations include team labels or the top two contributors.
Hierarchy: The total supplies context before readers scan ranks and names. Keep heading below 3 words, names below 3 and count figures below 6 characters.
Responsive: Rows remain in one column on mobile and the flexible name region wraps if needed. The root widens at 640px.
Layout: The bordered white root is 288px w-72 wide with an 8px rounded-lg radius. The p-6 root becomes 320px sm:w-80 at 640px. A 30px total precedes an ordered list by 20px. Rows have 12px vertical padding, 12px gaps, monospaced rank markers and right-aligned tabular counts. The text link sits 16px below.
States: Links underline on hover and show a 2px neutral-900 keyboard outline offset by 2px. The rows are static and have no selectable state.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│ Leading contributors                                         │
│ 1,284 total                                                  │
│ ──────────────────────────────────────────────────────────   │
│ 01   Alex Rivera                               482           │
│ 02   Jordan Lee                                351           │
│ 03   Sam Kim                                   208           │
│ ──────────────────────────────────────────────────────────   │
│ [View all contributors]                                      │
└──────────────────────────────────────────────────────────────┘

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 — Ranked contributor list

Pattern notes

More in Stat cards

Stat cards — Activity calendar

Stat cards — Benchmark range

Stat cards — Figure with bar chart