Features — Numbered capability ledger

Full-width numbered rows align a title, explanation and destination link in four columns.

ReactHTML

1440 × 900

Component.tsx79 lines

export default function FeaturesNumberedLedger() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <header>
          <p className="text-sm font-medium text-neutral-500">Eyebrow</p>
          <h2 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl mt-3">
            Heading for the key benefits
          </h2>
          <p className="text-lg text-pretty text-neutral-600 mt-4 max-w-2xl">
            A short introduction that names the audience and the benefit.
          </p>
        </header>
        <ol role="list" className="mt-10 border-b border-neutral-200">
          <li className="grid gap-3 border-t border-neutral-200 py-6 md:grid-cols-[3rem_1fr_2fr_auto] md:items-start">
            <span className="font-mono text-sm text-neutral-500">01</span>
            <h3 className="text-lg font-semibold">Main capability</h3>
            <p className="text-base text-neutral-600">
              A concise explanation of what this capability helps someone
              accomplish.
            </p>
            <a
              href="#"
              aria-label="Explore main capability"
              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 text-sm"
            >
              Explore
            </a>
          </li>
          <li className="grid gap-3 border-t border-neutral-200 py-6 md:grid-cols-[3rem_1fr_2fr_auto] md:items-start">
            <span className="font-mono text-sm text-neutral-500">02</span>
            <h3 className="text-lg font-semibold">Supporting workflow</h3>
            <p className="text-base text-neutral-600">
              A concise explanation of what this capability helps someone
              accomplish.
            </p>
            <a
              href="#"
              aria-label="Explore supporting workflow"
              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 text-sm"
            >
              Explore
            </a>
          </li>
          <li className="grid gap-3 border-t border-neutral-200 py-6 md:grid-cols-[3rem_1fr_2fr_auto] md:items-start">
            <span className="font-mono text-sm text-neutral-500">03</span>
            <h3 className="text-lg font-semibold">Useful detail</h3>
            <p className="text-base text-neutral-600">
              A concise explanation of what this capability helps someone
              accomplish.
            </p>
            <a
              href="#"
              aria-label="Explore useful detail"
              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 text-sm"
            >
              Explore
            </a>
          </li>
          <li className="grid gap-3 border-t border-neutral-200 py-6 md:grid-cols-[3rem_1fr_2fr_auto] md:items-start">
            <span className="font-mono text-sm text-neutral-500">04</span>
            <h3 className="text-lg font-semibold">Outcome assurance</h3>
            <p className="text-base text-neutral-600">
              A concise explanation of what this capability helps someone
              accomplish.
            </p>
            <a
              href="#"
              aria-label="Explore outcome assurance"
              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 text-sm"
            >
              Explore
            </a>
          </li>
        </ol>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for a short capability index with dedicated destination pages. Pick cards for media or longer descriptions. Variations: replace numbers with categories, include three rows, or add a short status beside each title.
Hierarchy: The index supports scanning while 18px titles name each capability. Keep titles under 4 words and explanations under 20. Each repeated Explore link includes its capability in its accessible label.
Responsive: Below 768px each row stacks index, title, explanation and action in source order. No fixed table width is required; borders still separate the four rows.
Layout: A max-w-6xl section contains a bordered ordered list 40px below its introduction. Rows have 24px vertical padding and 12px gaps. At 768px, a 48px index, flexible title, double-width explanation and auto-width link form four columns.
States: Links and buttons use neutral hover states and a 2px keyboard focus outline offset by 2px. Filled actions lighten from neutral-900 to neutral-700; outlined actions fill neutral-50. Informational regions remain static.

Desktop wireframe

┌────────────────────────────────────────────────────────────┐
│Eyebrow / Heading / Introduction                            │
│                                                            │
│01  Main capability       Supporting explanation   [Explore]│
│02  Supporting workflow   Supporting explanation   [Explore]│
│03  Useful detail         Supporting explanation   [Explore]│
│04  Outcome assurance     Supporting explanation   [Explore]│
└────────────────────────────────────────────────────────────┘

View all

Features — Accordion beside media
Layout tags: asymmetric,list,media
Features — Alternating media rows
Layout tags: split,media,spacious
Features — Before and after panels
Layout tags: split,list,icons

Features — Numbered capability ledger

Pattern notes

More in Features

Features — Accordion beside media

Features — Alternating media rows

Features — Before and after panels