# Timeline

Broadcast includes a unique interactive timeline section to showcase events, milestones, goals or even age-based shopping options. 

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/EXDW3HE9wEFyjSdfleQh/timeline%20new-b.gif" alt=""><figcaption><p><strong>Timeline used to shop by age group</strong></p></figcaption></figure>

With modern animation effects, this section enhances the online shopping experience for customers who scroll down the page or click on the timeline hotspots.

### Flexible

The timeline section can be used with or without images for simple text-based content or rich sliding images.&#x20;

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/76Km8TVNYgwDYTYi4KDG/without-images-timeline.jpg" alt=""><figcaption><p><strong>Focus changes as shoppers scroll down the page</strong></p></figcaption></figure>

Mobile users experience a horizontal sliding version that's easy to swipe through.&#x20;

<figure><img src="https://content.gitbook.com/content/j8jzXN4KKXAfQhgbN5lO/blobs/kCBWXgZ6OP5EF0qdJx7d/mobile-timeline-cropped.jpg" alt=""><figcaption><p><strong>Swipe through timeline periods on mobile</strong></p></figcaption></figure>

### Customize

Use the **section** settings to configure the presentation of the section:

* Add an optional heading, which can also be sized and aligned.
* Toggle using images
* With the color options, you can change the hotspot color, text, and section background.&#x20;
* Adjust the mobile height setting to match the best size for your images.&#x20;
* Section padding options help match the desired layout for your page.&#x20;

Each timeline **block** has options to configure the period information:

* Add an image for the timeline period.
* The subheading is placed above the main heading text.
* Add your heading and choose a size.&#x20;
* Use the text for your main description content.&#x20;
* The optional call-to-action button can link to any page. Use the button style and color options to complete each period in the timeline.&#x20;

### Video Overview

This video demonstrates the configuration options for both desktop and mobile views of the timeline section and how to configure the timeline periods:

{% embed url="<https://www.loom.com/share/f3c0729781cc4dd8a4777ad1efff5fb3?sid=175980ef-ca15-43aa-a19c-e2878b3276a7>" %}
**Video overview of the timeline section in Broadcast**
{% endembed %}