About this block

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.

When to use

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

• Feature sections to establish value before you explain the path to it
• Integrations to show the tools the Configure phase will connect

After

• CTAs to convert the confidence the path just built into a signup
• FAQs to answer the practical questions each phase leaves open

What you can display

The obvious fit is a three stage onboarding path. A few other ways to use the frame:

• A migration story. Name the phases Export, Map, and Cut Over so teams leaving a competitor can see the whole move at a glance.
• A partner program. Walk agencies through Apply, Certify, and Sell, with each checklist naming what the program provides at that stage.
• A security review. Show how procurement moves through Assess, Pilot, and Approve, so enterprise buyers know the process respects theirs.

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.