Numbered Steps Section

Your process as a row of cards with giant accent numbers. An ordered list, so the sequence is real markup.

Copied 0 times.

How it works

Step 01

Step 02

Step 03

Get started

Members only

This design needs a membership.
Today's price: $1/month, locked forever once you join.

Get it for $1/month Log in

Build a numbered steps section for my website. Match my existing design system, colors, and fonts.

STRUCTURE
- A centered intro: a small eyebrow badge pill, an h2 heading (max 8 words), and a one-line subline.
- Show 3 step cards in a row on desktop (equal-width grid), stacked vertically in order on mobile.
- Each step card, top to bottom: a small "STEP 01" style label (uppercase, letter-spaced), a giant number in my brand accent color, a bold step title, and one short line describing the step.
- Under the row, one centered CTA pill button in my brand accent (label and URL from config), at least 44px tall with a visible focus ring.

DATA AND HONESTY
- Steps live in one config array (title, line); the number comes from the array position, never hardcoded. Ship with clearly marked TODO placeholder steps for my real process. Empty array = the section does not render.
- Describe the real process only: no invented durations, counts, or success claims.

BEHAVIOR
- Static section; the numbers are text, not images.

QUALITY
- Semantic markup: the steps are an ol (it is a sequence), each card an li, step titles h3s.
- Cards equal height; the giant numbers use tabular figures and are aria-hidden (the ol already conveys order).
- WCAG AA contrast; fully responsive, cards stacked in order on mobile.

QUESTIONS
- Before you build, find or ask for: my real process steps (title and one line each). Check my project and site first; whatever you cannot find there, ask me for. Never invent these or ship placeholders.
- If anything else about my brand or content is unclear, ask me before inventing.

Members only

What it does

The numbered steps section explains your process as a row of cards with giant numbers: step one, step two, done. People buy what they can picture, and three tidy steps make anything feel doable. Confusion kills signups; a visible path revives them.

The numbers come from the order of your list, never typed by hand, so they can't go wrong.
A little eyebrow badge, a heading, and one intro line sit centered above the row.
Each card wears a small STEP 01 style label above its giant accent number, a bold title, and one short line.
Describe your real process only; invented durations and success claims are banned.
Cards stay equal height and stack in order on phones.
An optional button sits centered under the row; an empty list means the section doesn't render.

How it works

1Slide the step count, 3 to 5 cards.
2Decide whether a button sits under the row.
3Copy the prompt, your AI's marching orders for this one, into whichever AI you use.
4Write your real steps into the marked list, a title and one plain line each, in the order they truly happen.
5Read them in order out loud: a stranger should know exactly what happens first, next, and last.
6Check it on your phone: the cards should stack top to bottom in exactly the order you wrote them.

What you can customize

How many steps: three is the magic number for feeling easy; five fits processes that honestly have more moving parts.
CTA under the row: with gives the warmed-up reader a next move; without lets the section end quietly and hand off to the next one.
Numbers, colors, and type adapt to your site automatically, because your AI builds the section right inside your own design.