> For the complete documentation index, see [llms.txt](https://story.groupthought.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://story.groupthought.com/sections/story-sections/timeline-tree.md).

# Timeline tree

Story makes it simple to build a visually stunning timeline tree. Tell your shoppers about your key product dates and events. Add timeline blocks to build the tree. 

<figure><img src="/files/5kxs2gIrhXJuATJ04Vbl" alt=""><figcaption></figcaption></figure>

### Create a heading

Combine the **Timeline tree** section with a **Rich Text** section to build a custom heading:

<figure><img src="/files/k5FvgnDCkC5Bv9Pz2ZOp" alt=""><figcaption></figcaption></figure>

### Timeline events

Customize the timeline blocks for each event. Options include:

* Event heading
* Optional thumbnail image. A timeline dot will be used if no image is selected.
* Date or subheading
* Event details, rich text information&#x20;
* Link options if needed

<figure><img src="/files/7rq3mnxTsyqzFqddz6YC" alt=""><figcaption></figcaption></figure>

Timeline tree without images:

<figure><img src="/files/fKUN1pIJT0UybcqCAeiC" alt=""><figcaption></figcaption></figure>

### Section settings

Configure the section settings to customize the style and layout of the entire timeline:

<figure><img src="/files/k34pZiyBcytVhci3Y2nP" alt=""><figcaption><p><strong>Page width narrow for centered timeline</strong></p></figcaption></figure>

Changing the Width from **Page width narrow** to **Page width** will align the timeline to the left providing more room for details:

<figure><img src="/files/Tq2Em9O9dhhvqYfPee1W" alt=""><figcaption><p><strong>Page width for left alignment</strong></p></figcaption></figure>

### Mobile

The timeline tree is scrollable on mobile devices and uses the entire width to display the tree:

<figure><img src="/files/Soom2MmfTbhMmgSxiX42" alt=""><figcaption></figcaption></figure>