Three Phase Path
A three phase process section with icon squares, arrow connectors on desktop, per phase checklists, and a quiet link to the onboarding guide.
A three phase process section with icon squares, arrow connectors on desktop, per phase checklists, and a quiet link to the onboarding guide.
The source for every Marketing block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Three Phase Path compresses your process into three named phases: Discover, Configure, and Launch. A centered heading and subtitle set the frame, then the phases sit side by side on large screens, joined by arrow glyphs in muted circles that make the left to right order unmistakable. Each phase pairs a lucide icon in a soft square with the phase name, two lines of copy, and a three item checklist, and a quiet centered link to the onboarding guide closes the section.
The phases live in a single typed array, so renaming them, swapping icons, or rewriting the checklists is a data edit rather than a layout change. On mobile the arrows disappear and the phases stack cleanly, so the section holds its shape at every width without any images.
Reach for this block when your onboarding genuinely has a small number of distinct stages and you want each one to feel light. On a developer tool that teams adopt gradually, it works well near the end of the page, where a visitor who is nearly convinced wants to see that getting started is three understood moves rather than a long project, and the checklists make each move concrete.
A natural flow around it on a Marketing Pro page:
Before
After
The obvious fit is a three stage onboarding path. A few other ways to use the frame:
Tip: keep every checklist to exactly three items of similar length. The columns read as equals, so one phase with extra rows makes the others look unfinished.