Numbered Steps
A horizontal row of numbered steps, each pinning a label to the top and dropping a two line heading and a learn more link to the foot. A quiet, editorial flow.
A horizontal row of numbered steps, each pinning a label to the top and dropping a two line heading and a learn more link to the foot. A quiet, editorial flow.
Search blocks by description or jump to a page.
The source for every Modern SaaS block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Numbered Steps lays your process out as a quiet, editorial row. A left-aligned heading and subtitle sit above the steps. Each step pins a monospaced number and a short label to the top, leaves a tall, deliberate gap, then drops a two line heading and a "Learn more" link to the foot of the column. Thin vertical rules separate the steps into a single clean row on large screens; on smaller viewports the steps reflow to two columns and then one, each carrying a top rule so the rhythm holds at every width.
The restraint is the point. There are no icons, cards, or arrows between the steps, just type and space doing the work, so the section reads as confident and unhurried. Everything is built from theme tokens, so the whole block adapts to light and dark with no external images.
Reach for this block when you want to show the shape of a journey without turning it into a busy diagram. On a real estate marketplace it works well for walking buyers or sellers through the stages of a transaction, from search to signed contract, where each stage deserves a clear label and a place to read more.
It sits well in the upper middle of a Modern SaaS page, after the hero has made the promise and before the deeper feature sections prove it.
A natural flow around it on a Modern SaaS page:
Before
After
The obvious fit is three or four stages that name the steps in your workflow. A few other ways to use the frame:
Tip: keep the row to three or four steps and each heading to a single short idea. The tall gap above the heading is doing real work, so resist filling it.