Call to action — Numbered steps

A next-step introduction beside a bordered three-step list. Use it when a short process makes the action easier to understand.

ReactHTML

1440 × 900

Open in new tab

Component.tsx42 lines

export default function CtaNumberedSteps() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto grid max-w-6xl items-center gap-12 px-6 py-16 sm:py-24 md:grid-cols-2 md:gap-16">
        <div>
          <p className="text-sm font-medium text-neutral-500">Eyebrow for the short process</p>
          <h2 className="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Heading that makes the next step clear</h2>
          <p className="mt-6 text-lg text-pretty text-neutral-600">Supporting copy that explains the outcome and introduces the few steps needed to get there.</p>
          <div className="mt-8 flex flex-wrap items-center gap-3">
            <a href="#" className="inline-flex h-11 items-center justify-center rounded-md px-5 text-sm font-medium transition-colors bg-neutral-900 text-white hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 ">Primary action</a>
            <a href="#" className="inline-flex h-11 items-center justify-center rounded-md px-5 text-sm font-medium transition-colors border border-neutral-300 bg-white text-neutral-900 hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 ">Secondary action</a>
          </div>
        </div>
        <div className="rounded-lg border border-neutral-200 bg-white p-6">
          <ol role="list" className="grid gap-6">
            <li className="flex items-start gap-4">
              <span aria-hidden="true" className="flex size-8 shrink-0 items-center justify-center rounded-full bg-neutral-100 text-sm font-medium">1</span>
              <div>
                <h3 className="text-base font-semibold">Name the initial setup task</h3>
                <p className="mt-2 text-sm text-neutral-600">Explain what readers need to prepare before the first action.</p>
              </div>
            </li>
            <li className="flex items-start gap-4">
              <span aria-hidden="true" className="flex size-8 shrink-0 items-center justify-center rounded-full bg-neutral-100 text-sm font-medium">2</span>
              <div>
                <h3 className="text-base font-semibold">Describe the main working step</h3>
                <p className="mt-2 text-sm text-neutral-600">Outline the central task and the support available while it is underway.</p>
              </div>
            </li>
            <li className="flex items-start gap-4">
              <span aria-hidden="true" className="flex size-8 shrink-0 items-center justify-center rounded-full bg-neutral-100 text-sm font-medium">3</span>
              <div>
                <h3 className="text-base font-semibold">State the final confirmation</h3>
                <p className="mt-2 text-sm text-neutral-600">Describe how readers know the process is complete and what follows.</p>
              </div>
            </li>
          </ol>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when the next action begins a short predictable process. Choose cta-detail-card when timing or price matters more than steps. Variations: use two steps, place completion criteria in the explanations, or link the secondary action to a longer guide.
Hierarchy: The section headline is 30px, increasing to 36px at 640px, semibold with tracking-tight and balanced wrapping. Read eyebrow, h2, 18px lede and actions, then three 16px semibold step titles with 14px neutral-600 explanations. Slots: eyebrow 5 words, heading 8, lede 25, actions 3, each step title 5, each explanation 18. The styled ol retains role=list.
Responsive: Below 768px the card follows the intro with a 48px gap. From 768px the two-column arrangement has a 64px gap. At 640px the heading increases to 36px and vertical padding to 96px. Action labels wrap and numbered circles keep their 32px size.
Layout: A 1152px max-w-6xl container has 24px horizontal padding and 64px vertical padding, increasing to 96px at 640px. At 768px two equal columns have 64px gap and center alignment. The intro has 16px to heading, 24px to lede and 32px to a wrapping action row with 12px gaps. A rounded-lg neutral-200 bordered white card has 24px padding. Its ordered list has 24px gaps; each row has a 32px neutral-100 number circle and text with a 16px gap.
States: Actions are 44px tall with 20px horizontal padding and rounded-md 6px radii. Primary hover changes neutral-900 to neutral-700; secondary hover changes white to neutral-50. Colour transitions take 150ms. Every enabled control shows a 2px neutral-900 focus-visible outline offset 2px. The numbered circles and list are static. No completion state is shown.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│ Eyebrow                         ┌──────────────────────────┐ │
│ Heading for the next step       │(1) First step title      │ │
│ Supporting lede                 │    Step explanation      │ │
│ [Primary] [Secondary]           │(2) Next step title       │ │
│                                 │    Step explanation      │ │
│                                 │(3) Final step title      │ │
│                                 │    Step explanation      │ │
│                                 └──────────────────────────┘ │
└──────────────────────────────────────────────────────────────┘

View all

Call to action — Audience choice cards
Layout tags: split,list,spacious
Call to action — Card with image
Layout tags: split,media
Call to action — Centred with actions
Layout tags: centered,stacked,spacious

Call to action — Numbered steps

Pattern notes

More in Call to action

Call to action — Audience choice cards

Call to action — Card with image

Call to action — Centred with actions