Features — Numbered steps

Three numbered steps in equal columns lead to a full-width note and action. Use it to explain a short sequence with clear timing.

ReactHTML

1440 × 900

Open in new tab

Component.tsx38 lines

export default function FeaturesNumberedSteps() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <div className="max-w-2xl">
          <p className="text-sm font-medium text-neutral-500">Eyebrow for the capabilities</p>
          <h2 className="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Heading that explains the process</h2>
        </div>
        <ol role="list" className="mt-12 grid gap-10 md:grid-cols-3">
          <li className="border-t border-neutral-200 pt-6">
            <span className="flex size-10 items-center justify-center rounded-full border border-neutral-300 font-mono text-sm font-medium">01</span>
            <h3 className="mt-6 text-lg font-semibold">Title for the first step</h3>
            <p className="mt-2 text-base text-pretty text-neutral-600">Describe what readers need to prepare before they begin. Name the action that starts the process.</p>
            <p className="mt-4 text-sm text-neutral-500">Day 1</p>
          </li>
          <li className="border-t border-neutral-200 pt-6">
            <span className="flex size-10 items-center justify-center rounded-full border border-neutral-300 font-mono text-sm font-medium">02</span>
            <h3 className="mt-6 text-lg font-semibold">Title for the next step</h3>
            <p className="mt-2 text-base text-pretty text-neutral-600">Explain the main action in the sequence. Say how readers know they are ready to continue.</p>
            <p className="mt-4 text-sm text-neutral-500">Day 2</p>
          </li>
          <li className="border-t border-neutral-200 pt-6">
            <span className="flex size-10 items-center justify-center rounded-full border border-neutral-300 font-mono text-sm font-medium">03</span>
            <h3 className="mt-6 text-lg font-semibold">Title for the final step</h3>
            <p className="mt-2 text-base text-pretty text-neutral-600">Describe the result readers review at the end. Include the follow-up that makes the outcome useful.</p>
            <p className="mt-4 text-sm text-neutral-500">Day 3</p>
          </li>
        </ol>
        <div className="mt-12 flex flex-col gap-6 rounded-lg bg-neutral-50 p-6 sm:flex-row sm:items-center sm:justify-between">
          <p className="text-base text-pretty text-neutral-600">A short note that explains what readers need before taking the first step.</p>
          <div className="shrink-0">
            <a href="#" className="inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Primary action</a>
          </div>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for a process with three sequential stages. Choose features-sidebar-list when each stage needs a longer explanation. Variations: change timing to duration, use four steps, or remove the note action for a purely explanatory section.
Hierarchy: The section heading is 30px text-3xl semibold with tracking-tight and balanced wrapping, rising to 36px text-4xl at 640px. Read the heading then the 01-03 sequence, 18px semibold step titles, 16px neutral-600 descriptions and 14px neutral-500 timing lines. The closing action follows the note. Slots: eyebrow 4 words, heading 8, step title 6, body 30, timing 4, note 20, action 3.
Responsive: Steps stack with 40px gaps below 768px and use three equal md:grid-cols-3 columns above. The note and action stack below 640px and form a justified sm:flex-row at 640px. Type and section padding also step at 640px.
Layout: A white section uses a 1152px max-w-6xl container, 24px px-6 side padding, and 64px py-16 vertical padding, rising to 96px sm:py-24 at 640px. A max-w-2xl intro precedes a three-item ol by 48px. Steps use gap-10 40px and equal columns from 768px. Each has a 1px top border, 24px top padding, a 40px bordered number circle, a 24px title margin, 8px body margin and 16px timing margin. A full-width rounded-lg neutral-50 note bar follows by 48px with p-6 24px and a 24px gap.
States: The 44px primary action has a 6px radius, neutral-900 fill, white text and neutral-700 hover fill with a 150ms transition. Focus shows a 2px neutral-900 outline offset 2px. Steps are static; there are no selected, disabled or loading states.

Desktop wireframe

┌────────────────────────────────────────────────────────────┐
│ Eyebrow / Heading for the process                          │
│                                                            │
│ ─────────────────  ─────────────────  ─────────────────    │
│ (01)               (02)               (03)                 │
│ First step title   Next step title    Final step title     │
│ Step body          Step body          Step body            │
│ Day 1              Day 2              Day 3                │
│                                                            │
│ ┌──────────────────────────────────────────────────────┐   │
│ │ Supporting note                    [Primary action]  │   │
│ └──────────────────────────────────────────────────────┘   │
└────────────────────────────────────────────────────────────┘

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 steps

Pattern notes

More in Features

Features — Accordion beside media

Features — Alternating media rows

Features — Before and after panels