Horizontal Steps
A centered heading above four numbered steps on a connected rail, each marker with a title and short description that stacks on small screens.
A centered heading above four numbered steps on a connected rail, each marker with a title and short description that stacks on small screens.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Horizontal Steps lays out an engagement as four numbered markers on a connected rail: Understand, Propose, Build, Launch. Each marker sits above a title and a short description of the work at that stage, from a first conversation about the problem and the audience through to final files, a walkthrough, and support past launch. The rail collapses to a plain stacked list on small screens.
Steps are one flat array of four objects, each with a number, title, and description; the connecting line is drawn between markers and hidden after the last one. The horizontal layout is the distinctive choice, letting a visitor read the whole arc left to right in a single glance.
Reach for this block as the process section on a homepage or about page where a visitor should grasp the shape of an engagement before they reach out. The installer swaps the four step titles and descriptions to match how they actually work, keeping the numbered rail intact.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the end-to-end engagement overview. Other step arrangements:
Tip: write each step description as what the client receives at that stage, not the internal task you run.