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.
The Modern SaaS Collection unlocks the source for every Modern SaaS block. All Access unlocks every Collection.
Already purchased? Log in
Numbered Steps lays your process out as a quiet, editorial row. 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.
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. It suits a product with a clear, linear flow, plan, build, ship, measure, where each step deserves a line of its own and a place to read more.
It sits well in the upper middle of a Modern SaaS landing 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 four steps that name the stages of 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.