> 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

Add a beautiful timeline tree to showcase key dates and events

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="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2Fa6xSt8ae8ArTAmaxnyQf%2FSTO%20timeline%20tree%20main%20light.jpg?alt=media&amp;token=fcf522e7-6cca-4bd3-8a16-200025294e2d" 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="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FUOXsyV9QWWCFJnB0A12U%2FSTO%20Timeline%20tree%20combine%20B.jpg?alt=media&amp;token=04bfa975-bd2e-4e85-bcd8-a42097730ec5" 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="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FIWobrtlBp9iP8OkLyZqf%2FSTO%20section%20settings%20timeline%20tree.jpg?alt=media&amp;token=a044ade3-17a7-4280-a39c-b5f8dfc7dc1c" alt=""><figcaption></figcaption></figure>

Timeline tree without images:

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FHuNNTgl22zzJNwFr0j9w%2FSTO%20Timeline%20tree%20dots.png?alt=media&amp;token=78765282-d32b-4670-abe5-ff7fb95f5ebf" alt=""><figcaption></figcaption></figure>

### Section settings

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

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FmhuWaa4b696p6xna7hNl%2FSTO%20timeline%20tree%20section%20settings.jpg?alt=media&amp;token=f13b6b54-e57d-4f03-b572-7255536504b2" 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="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FVis4LrVbIbQF3nzosqPH%2FSTO%20timeline%20tree%20page%20width.jpg?alt=media&amp;token=a2dd1ade-32d2-4fa9-9d65-0696e8d8dd7c" 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="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FbgPSX4yEt2SHGHttwIBV%2FSTO%20timeline%20tree%20mobile.png?alt=media&amp;token=8aeeee90-4016-4aee-984b-2543f91e1a7c" alt=""><figcaption></figcaption></figure>