Why use it:
- Tells a story visually: sequential milestones with dates and icons are easier to follow than a bulleted list, giving visitors a sense of progress and journey.
- Builds credibility: showing dated milestones (funding, launches, awards) signals momentum and history.
- Great for process explanation: break down a multi-step process (onboarding, project phases, roadmap) into digestible, visually connected steps.
Layout Options:
- Horizontal: milestones sit above the timeline with the date and title only; connects icons/nodes along a horizontal line. Compact and clean for simple date markers.
- Horizontal – Details below: same horizontal layout, but each milestone includes a full card below it with an icon, title, and description. Best when each milestone needs more explanation.
- Vertical: milestones alternate left and right along a vertical line, each with a full detail card. Works well for longer timelines or storytelling sections where visitors scroll through the journey.
How to add/edit milestones:
- Milestones are managed as a list — click + Add to create a new one, or use the drag handle to reorder existing ones.
- Each milestone has its own settings: Title, Date, Description, and an optional Show icon toggle with an icon picker.
Shared Styling Settings:
- Items per row: controls how many milestones display before wrapping
- Text Font Family / Headline Font Size: typography controls
- Title Color: color for milestone titles/dates
- Box Styling: Background color and Text Color for the milestone cards