> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bosscart.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Timeline widget

> The Timeline element displays a sequence of events, milestones, or steps in chronological order, perfect for company history, product roadmaps, project phases, or "how it...

The Timeline element displays a sequence of events, milestones, or steps in chronological order, perfect for company history, product roadmaps, project phases, or "how it works" journeys.

### **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.

<img src="https://mintcdn.com/alavon365/a4e0aobXvzetCcVN/images/builder/ead9175722ae6ec7.png?fit=max&auto=format&n=a4e0aobXvzetCcVN&q=85&s=c35b8489aa94d442b60b7cdfc33f6a87" alt="" width="1750" height="779" data-path="images/builder/ead9175722ae6ec7.png" />

### **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.

<img src="https://mintcdn.com/alavon365/FzeaQ9w7x4DDlcd4/images/builder/628f6409642defa2.png?fit=max&auto=format&n=FzeaQ9w7x4DDlcd4&q=85&s=4841f369e332f800fd6c9399c3eab8cd" alt="" width="1510" height="554" data-path="images/builder/628f6409642defa2.png" />

* **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.

<img src="https://mintcdn.com/alavon365/uuQgZm_Mu6oLUDLv/images/builder/fbe5d264c69af9d7.png?fit=max&auto=format&n=uuQgZm_Mu6oLUDLv&q=85&s=414c1b60ff398bcec2108f814a2b59fd" alt="" width="1521" height="606" data-path="images/builder/fbe5d264c69af9d7.png" />

* **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.

<img src="https://mintcdn.com/alavon365/FzeaQ9w7x4DDlcd4/images/builder/627a94fbd54596c3.png?fit=max&auto=format&n=FzeaQ9w7x4DDlcd4&q=85&s=449cad2d45d4f5ae2283a067a18c7432" alt="" width="1498" height="808" data-path="images/builder/627a94fbd54596c3.png" />

### **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.

<img src="https://mintcdn.com/alavon365/QV57KeevJvB6qbiC/images/builder/780321acc0c9506a.png?fit=max&auto=format&n=QV57KeevJvB6qbiC&q=85&s=a3e6c03fe2af0a664c5d5d813032abe2" alt="" width="1489" height="653" data-path="images/builder/780321acc0c9506a.png" />

<img src="https://mintcdn.com/alavon365/zazDpBR889DAW7oG/images/builder/37fad0dc93cde560.png?fit=max&auto=format&n=zazDpBR889DAW7oG&q=85&s=fa8b6b47ace1d8b5aa2ec7abb5b31d5f" alt="" width="1522" height="646" data-path="images/builder/37fad0dc93cde560.png" />

### **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