UI components · Marketing
How It Works
Also called: How it works section, Steps section, Process section, Getting started steps
A section on a marketing site that explains "how to get started" in 3–4 numbered steps, each with a number, a short title, and one sentence, so visitors know what they'll need to do.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstAdd a How It Works section after the feature grid. An h2 heading "Get started in three steps" (use the real number of steps), with 3 equal-width steps side by side below it, marked up as an ol list. Each step starts with a 40px round number (dark background, white text), with a 1px dashed line connecting the numbers. Under each number, an 18px bold title that starts with a verb and at most two lines of 15px gray text. Write the steps from the real onboarding flow I provide: [Step 1] [Step 2] [Step 3]. Don't merge or skip necessary steps just to make it three. Put a primary "Start free trial" button under the last step. On mobile, stack the steps vertically, with the number on the left and the text on the right.
Send to
01Decide
Does your content look like this?
Check both columns to confirm How It Works is what you need.
Use How It Works when
- Marketing sites and landing pages that need to tell visitors what steps it takes to get started, so trying it feels less daunting
- Service products (bookings, repairs, account opening) that need to explain the flow from order to completion
- Event pages that explain how to take part, like register, submit your work, and wait for results
Pick something else when
Showing which step the user is currently on in a form or checkout flow
Use insteadStepsParallel selling points with no order
Use insteadFeature GridWhen users actually need to fill in information across several steps
Use insteadWizard
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
A setup that really takes a dozen steps sold as "Done in three steps," so visitors find out it's complicated only when they try
- 02
Steps with no numbers and no connecting line, so it looks just like a feature grid and the order is lost
- 03
Making it look like a clickable, highlighting stepper, so visitors think they can click in and do something
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
A section heading and 3–4 steps in order. Each step is a number or icon, a short title starting with a verb, and one or two lines of text. The steps are often joined by lines or arrows, and a start button can follow at the end.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A How It Works section usually sits before or after the feature grid, with a heading like "Open your store in three steps." Below it, 3–4 steps run side by side. Each has a big number (or icon), a short title that starts with a verb ("Add your products"), and one or two lines of text, and the steps are often joined by a line or arrows. Some versions stack the steps vertically with a screenshot for each. A start button often follows the last step.
It sounds like Steps, but it does a completely different job. Steps is a progress indicator in forms and checkout flows that shows which step the user is on and changes as they go. How It Works is just an explanation on a marketing page. It doesn't track progress and can't be clicked. How it differs from a Feature Grid: the items in a feature grid are parallel selling points, while these steps happen in order and must be numbered. How it differs from a Wizard: a wizard is the actual page where users fill things in step by step.
Write it from the product's real onboarding flow, with 4 steps at most and one action per step. If it really takes a dozen steps, don't squeeze it into "Three easy steps" and mislead visitors. Start each title with a verb, and say roughly how long the step takes and what users need to have ready. Use an ol list for the numbering, and stack the steps vertically on mobile.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-how-it-works- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
section:is([class*="how-it-works" i], [id*="how-it-works" i], [class*="howitworks" i], [class*="how_it_works" i], [class*="steps-section" i], [class*="process-section" i], [class~="process"], [id="how" i], [id="steps" i], [id="process" i]):is([class*="how-it-works" i], [id*="how-it-works" i], [class*="howitworks" i], [class*="how_it_works" i]) :is(ol, ul, div[class*="steps" i]):not(li *, [class*="steps" i] *)
- Class keywords
Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.
how-it-workshowitworkssteps-sectionprocess-sectionstep-by-stepthree-stepssimple-stepshow-to-use
- Component names
React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.
HowItWorksHowItWorksSectionStepsSectionProcessSectionSimpleSteps
- Structure
Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.
starts with headinggrid of itemsrepeated items
- Priority
- 4 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 30, 2026