Call to action — Readiness checklist close

A centered prerequisite checklist ends with one action beneath a divider. Use it when confirming readiness makes the next step easier.

ReactHTML

1440 × 900

Open in new tab

Component.tsx37 lines

export default function CtaReadinessChecklist() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24 ">
        <header className="mx-auto max-w-2xl text-center">
          <p className="text-sm font-medium text-neutral-500">Eyebrow for the section</p>
          <h2 className="mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Heading for confirming readiness</h2>
          <p className='mt-4 text-lg text-pretty text-neutral-600'>Name what readers should have in place before taking the next step.</p>
        </header>
        <div className="mx-auto mt-10 max-w-3xl rounded-lg border border-neutral-200 bg-white p-6 sm:p-8">
          <ul role="list" className="grid gap-6 sm:grid-cols-2">
            <li className="flex items-start gap-3">
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5 shrink-0"><path d="m5 12 4 4L19 6" /></svg>
              <p className="text-sm text-neutral-600">First prerequisite for getting started</p>
            </li>
            <li className="flex items-start gap-3">
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5 shrink-0"><path d="m5 12 4 4L19 6" /></svg>
              <p className="text-sm text-neutral-600">Second prerequisite for a useful result</p>
            </li>
            <li className="flex items-start gap-3">
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5 shrink-0"><path d="m5 12 4 4L19 6" /></svg>
              <p className="text-sm text-neutral-600">Third prerequisite about shared access</p>
            </li>
            <li className="flex items-start gap-3">
              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5 shrink-0"><path d="m5 12 4 4L19 6" /></svg>
              <p className="text-sm text-neutral-600">Fourth prerequisite about available time</p>
            </li>
          </ul>
          <div className="mt-8 border-t border-neutral-200 pt-6 text-center">
            <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 ">Begin the next step</a>
            <p className="mt-3 text-xs text-neutral-500">Short expectation for what happens next</p>
          </div>
        </div>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use for a short readiness check before onboarding. Choose numbered steps when the reader needs a procedure. Variations include two prerequisites or a reassurance note beneath the action.
Hierarchy: The invitation leads, then four static prerequisites and a single action. Limit heading to 7 words, lede to 20, each prerequisite to 10 and expectation note to 10.
Responsive: Below 640px checklist items stack and panel padding is 24px. From 640px they become two columns with 32px panel padding.
Layout: The white section uses a 1152px max-w-6xl container, 24px px-6 sides and 64px py-16 vertical padding, increasing to 96px sm:py-24 at 640px. A max-w-3xl bordered panel sits 40px below the centered heading. It has 24px padding, 32px from 640px, and a two-column sm:grid-cols-2 checklist with 24px gaps. A centered action footer starts 32px later with a top rule and 24px top padding.
States: The 44px filled action changes from neutral-900 to neutral-700 on hover; outlined actions fill neutral-50. All controls show a 2px neutral-900 keyboard outline offset by 2px. Checklist icons are decorative and do not represent editable checks.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│                   Heading for confirming readiness           │
│                         Short introduction                   │
│ ┌─────────────────────────────────────────────────────────┐  │
│ │ + First prerequisite     + Second prerequisite          │  │
│ │ + Third prerequisite     + Fourth prerequisite          │  │
│ ├─────────────────────────────────────────────────────────┤  │
│ │                   [Begin the next step]                 │  │
│ │                       Expectation note                  │  │
│ └─────────────────────────────────────────────────────────┘  │
└──────────────────────────────────────────────────────────────┘

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 — Readiness checklist close

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