Search blocks by description or jump to a page.
A vertical timeline that maps each process phase down the page in sequence. Use it to show the path a project follows from kickoff through delivery.
Vertical Timeline is a centered process walkthrough. A badge and heading sit above a short description, then a vertical rail runs down the middle of the layout. Each phase hangs off the rail as a filled circular node containing an icon, with a card that alternates left and right of center so the eye zigzags naturally down the page. Every card shows a week range, a phase name, and a one-sentence description. Below the last entry a pair of call-to-action buttons close the section.
The five phases and all copy are independent of the layout. You can add or remove phases, reorder them, swap the icons, adjust the week labels, and rewrite the heading and subtext without affecting the rail or the alternating card rhythm. The two footer buttons are also standalone and can point to any destination or be removed entirely.
Reach for this block when a client or prospect needs to understand the arc of an engagement before they commit. It suits a product analytics SaaS that wants to walk a prospective customer through the onboarding journey, from initial data audit through instrumentation, dashboard setup, and go-live. The alternating layout gives each phase more visual weight than a horizontal stepper and keeps the sequence legible even when phases overlap in time, making it a better choice than a cycle diagram when the work is fundamentally linear.
A natural flow around it on a Portfolio page:
Before
After
The block frames any sequential engagement as a series of named phases with timeframes. A few ways to fill it:
Tip: keep phase descriptions to one or two sentences so each card stays compact and the zigzag rhythm stays readable as the list grows.