Vertical Steps
Five numbered stages stacked in a ruled list each with a title and a description that names a concrete commitment.
Five numbered stages stacked in a ruled list each with a title and a description that names a concrete commitment.
Search blocks by description or jump to a page.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Vertical Steps stacks five numbered stages in a ruled list, from First contact through to Handoff and close, each with a plain title and a description that names a real commitment: the scoping step produces a written brief with both parties signed off before anything starts, and the final step promises two weeks of post-handoff availability for questions that come up during development.
One steps array of five objects, each with a padded number string, drives the list. Numbering the steps with tabular-nums strings rather than CSS counters keeps the layout predictable and the numbers copyable as text.
Reach for this block on a services or about page to explain the working process in sequence. The installer swaps the step titles and descriptions to match their own phases and commitments.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the five-stage freelance engagement flow. Other uses:
Tip: each step description should name one concrete commitment or limit, not just restate the step title in different words.