Timeline widget

​

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