About this block

Milestone Path is a process section drawn as a journey. A centered heading and lede sit above a winding dashed SVG path that rises and dips across the section, carrying four numbered primary dots. Beneath the path a four column grid names each milestone with a title and one line. On small screens the path hides and the grid becomes a numbered list, so the content never depends on the decoration.

The milestones are a plain array, and the dot coordinates live in a small data block aligned with the four grid columns, so retitling steps needs no SVG work at all. The path is one bezier string you can flatten or exaggerate to taste. Everything uses theme tokens, no images.

When to use

Reach for this block when onboarding is a journey worth romancing a little. The winding path reads warmer and less mechanical than horizontal-connected or pipeline-flow, which suits products selling ease rather than rigor. It beats zigzag-steps when you want all four milestones visible in one glance, and onboarding-checklist when the audience is evaluating, not already activating.

A natural flow around it on a Marketing Pro page:

Before

• Heroes to set the destination the path then walks toward

After

• Testimonials from customers who finished the road
• CTAs inviting readers to take the first stop

What you can display

One strong use is time to value: connect, import, ship, autopilot. A few other four stop journeys:

• Migration. Audit, map, move, verify, for teams scared of the switch.
• Agency onboarding. Kickoff, audit, quick wins, ongoing program, for a services page.
• Learning curve. First send, first automation, first report, first optimization, framed around confidence.

Tip: write milestone titles as actions the reader takes, the path already supplies the sense of progress.