Vertical Milestones
A split process section with a sticky header, CTA, and proof stats beside a vertical timeline of four numbered milestones with timing detail rows.
A split process section with a sticky header, CTA, and proof stats beside a vertical timeline of four numbered milestones with timing detail rows.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Vertical Milestones splits your process across two columns. The left side holds a header that stays put as the page scrolls: a heading, a supporting line, a rounded call to action, and a pair of proof stats sitting above a hairline rule. The right side runs a vertical timeline of four numbered circles joined by a thin connector line, each milestone carrying a title, a short description, and a muted detail row that names the timing and the outcome.
The two columns are independent, so you can rewrite the header, swap the stats, or add and remove milestones without touching the rest. Each milestone is one entry in a typed array, and the detail row takes any two short values, so the timing and outcome labels bend to whatever your process measures.
Reach for this block when the order of your process matters and you want the page to say so. On an implementation heavy product, such as a payroll platform that migrates companies off a legacy provider, it works well as the section that answers the quiet question of how long this will take and what could go wrong, because every step names its timing and its finished state.
A natural flow around it on a Marketing Pro page:
Before
After
The obvious fit is an onboarding or migration timeline with real dates. A few other ways to use the frame:
Tip: keep every detail row to the same two part shape, a timing then an outcome. The column reads as a schedule only if the rows scan identically.