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:

Each timeline episode is added as a timeline block:

Mobile
An optional mobile image can be used with the same overlay effect. The timeline episodes can be scrolled with touch swipes.

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.
Text color of the timeline episodes

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

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.

To use separately, uncheck "Enable image overlay" option in the section settings.
Last updated