Vertical Timeline
Narrow vertical timeline of four numbered steps joined by a line, with buttons below.
Narrow vertical timeline of four numbered steps joined by a line, with buttons below.
The Marketing Pro Collection unlocks the source for every Marketing Pro block. All Access unlocks every Collection.
Already purchased? Log in
Vertical Timeline is a centered, narrow layout set inside a two column max container. A bold heading and a short supporting sentence sit at the top, followed by a vertical rail of four numbered steps. Each step pairs a circular number badge with a title and a short description beside it. A thin connector line runs between badges so the sequence reads as one continuous flow. Two call to action buttons sit below the last step.
The heading, supporting sentence, and each step's title and description are independent pieces of copy. You can rewrite all of them freely. The number of steps can grow or shrink, and the connector line between steps extends or disappears automatically. The two buttons below can be relabeled or reduced to one without touching anything else in the block.
This layout works well when you need to show a short, ordered process without the page weight of images or mockups alongside each step. For a real estate marketplace it fits a property listing flow, an offer sequence, or a buyer journey where the steps are brief enough to scan in seconds. It is a better fit than a tabbed or horizontal layout when the steps carry slightly different lengths of copy, because the vertical rail keeps them aligned even when one description runs a line longer than the others.
A natural flow around it on a Marketing Pro page:
Before
After
The block frames any short sequential process, and the parts swap independently:
Tip: keep each step description to two short sentences so the rail stays compact and readers reach the buttons without scrolling past a wall of text.