Horizontal Connected
Three steps in a row joined by a thin connector line with a dot marking each step.
Three steps in a row joined by a thin connector line with a dot marking each step.
Search blocks by description or jump to a page.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Horizontal Connected is a three step process section. A centered heading and a short subheading introduce the sequence, and below them three columns sit in a row. Each column opens with a small filled dot; a thin horizontal rule stretches from the first dot to the second and from the second to the third, so the steps read as a connected chain. Under the connector row each step shows a small labeled counter, a short title, and two sentences of supporting copy.
The three steps, the heading, and the subheading are all independent. You can rewrite any of the copy, change the step titles, or adjust the supporting text without affecting the layout. On narrow screens the columns stack vertically and the connector lines are hidden, so the block works at every viewport without extra configuration.
This layout is well suited to a product signup or account opening flow where you need to reassure a prospective customer that getting started is quick. For a fintech or banking product it fits naturally on a landing page between the hero and the pricing table, where it can answer the implicit question of how onboarding actually works before the visitor commits to a plan. Compared to a vertical timeline, the horizontal rail keeps all three steps visible at once so a reader grasps the full journey in a single glance rather than scrolling through it.
A natural flow around it on a Marketing Pro page:
Before
After
The most direct use is a three step account opening or onboarding summary. A few other ways to use the frame:
Tip: keep each step description to two short sentences so all three columns stay the same height and the connector line reads as truly level.