Milestone Path
A winding dashed path with four numbered milestone dots above a matching grid of steps.
A winding dashed path with four numbered milestone dots above a matching grid of steps.
The Marketing Collection unlocks the source for every Marketing block. All Access unlocks every Collection.
Already purchased? Log in
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.
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
After
One strong use is time to value: connect, import, ship, autopilot. A few other four stop journeys:
Tip: write milestone titles as actions the reader takes, the path already supplies the sense of progress.