Steps
Numbered steps that lay out how your product works from start to finish. Drop it on a homepage to turn a process into an easy three or four part story.
Numbered steps that lay out how your product works from start to finish. Drop it on a homepage to turn a process into an easy three or four part story.
Search blocks by description or jump to a page.
Steps is a two-column interactive section. A centered heading and a short supporting sentence sit above the layout. On the left, a vertical stack of clickable step buttons each shows a numbered circle, a step title, and a one-line description. On the right, a wide image panel fills the remaining space, and an overlay at the bottom of the panel lists the active step's key benefits in a two-column bullet grid.
Clicking any step button swaps the image and benefit list to match, so the right panel always reflects the selected step. The heading, step count, step copy, images, and benefit lists are all independent, so you can rewrite any label or swap an image without affecting the others.
Reach for this block when you need to explain a multi-stage process in sequence and pair each stage with a supporting visual. It works especially well on a healthcare scheduling product's homepage, where you might walk a new patient through booking an appointment, completing intake forms, receiving a confirmation, and joining a visit. Compared to a static numbered list or a plain feature grid, the interactive panel keeps the page compact and lets curious visitors linger on whichever step matters most to them.
A natural flow around it on a Marketing (Legacy) page:
Before
After
Each step slot holds a title, a short description, an image, and a short list of benefit points. A few ways to fill those slots:
Tip: keep benefit lists to three or four short phrases per step so the overlay panel stays readable and does not crowd the image behind it.