> 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

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

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

Each timeline episode is added as a timeline block:

<figure><img src="/files/4Q6VnSRisWCKUEnuymP6" 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="/files/KyJvv6uMSzlAy3i30Yy9" 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="/files/nZ1W0fuVI4uZErYTF6NH" 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="/files/EASN3gUK4nFHPqxSeAJP" 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="/files/YIxC9igWKOs797V0KBLk" alt=""><figcaption></figcaption></figure>

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