> 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-with-banner.md).

# Timeline with banner

Compact timeline strip to showcase key dates and events

Add a compact horizontal timeline that includes an optional overlay effect with an image banner:

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2Fi1YxbQdbwA4YdTrMKa5o%2FAug-26-2023%2007-54-45.gif?alt=media&amp;token=1512d512-2d01-466e-8148-a4219bdef42c" alt=""><figcaption></figcaption></figure>

Each timeline episode is added as a timeline block:

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FkJOpaoRg10VS118F68YW%2FSTO%20timeline%20banner%20main%20C.jpg?alt=media&amp;token=c2a3e3e4-104c-4fcf-ac7b-1c6ac73a64df" alt=""><figcaption></figcaption></figure>

### Mobile

An optional mobile image can be used with the same overlay effect. The timeline episodes can be scrolled with touch swipes.&#x20;

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FGVwRCEN0aiOlXaSbYEg0%2FSTO%20banner%20timeline%20mobile.jpg?alt=media&amp;token=5ca43094-cb24-48a3-86cd-a107266c03a3" alt=""><figcaption></figcaption></figure>

### Choose colors

The section settings include color options for:

* Background color for the banner and timeline
* Color of the dates which are overlayed over the banner. Or when used without a banner.&#x20;
* Text color of the timeline episodes

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2Frv03jKGSaebfqbumT9ET%2FSTO%20timeline%20banner%20colors.jpg?alt=media&amp;token=f96282fe-ed62-40e5-bf82-5c50b90b5374" alt=""><figcaption></figcaption></figure>

### Standalone timeline

The horizontal timeline strip can be used without the banner image and added anywhere on your page to create a different style:

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2F99CceigX61gONBp9Ql0g%2FSTO%20timleine%20banner%20other%20section.jpg?alt=media&amp;token=dbc187b0-3529-431c-af65-8d99913d454e" alt=""><figcaption></figcaption></figure>

In this example, we've used a different image banner section and added the timeline strip below. This removes the overlay effect and adds spacing. The strip can be combined with any of the sections in Story.&#x20;

<figure><img src="https://798529998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Frse2xho0gVJCQ27Qc08u%2Fuploads%2FUxngGd85j91SZsKnyYOA%2FSTO%20timeline%20banner%20no%20image%20overlay.jpg?alt=media&amp;token=1bd1e40a-6151-4162-99ac-9427a558015a" alt=""><figcaption></figcaption></figure>

To use separately, uncheck "Enable image overlay" option in the section settings.&#x20;