Vertical Timeline

About this block

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.

When to use

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

• A hero section to establish what the product does before walking through how it works
• Features that detail the product's capabilities, setting up the process that follows

After

• Testimonials from people who have completed the process, lending credibility right after the steps
• A CTA to convert readers who are ready to act once they understand the journey

What you can customize

The block frames any short sequential process, and the parts swap independently:

• Step count. Add a fifth step or trim to three without any layout adjustment; the connector line between badges draws and removes itself automatically.
• Heading and subtext. The heading and the sentence below it are separate fields, so you can sharpen the promise or match the tone of the surrounding page without touching the step list.
• Button labels and variants. The two buttons below the steps accept any label and can be switched between filled and outline styles to match your primary and secondary calls to action.

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.