# Timeline

> Steps along a line: the story of your brand, how a product is made, or what happens after an order. Four layouts, from a simple list to a pinned story that unfolds as shoppers scroll.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/sections/timeline/

## At a glance

- **In the editor:** Timeline
- **Where it goes:** Any page template, with Add section
- **In the presets:** Tally: Home page, About page; Poster: About page
- **Settings:** 17
- **Blocks:** Step
- **App blocks:** Yes

## Set it up

1. Add a **Step** block for each moment.
2. Write the **Label** – a year, a duration or a step number (*1998*, *Day 1*, *2–3 days*) – then the **Title** and **Text**.
3. Add an **Image** to a step if it helps the story.

## Layouts

| Layout | How it reads |
| --- | --- |
| **Vertical** | Steps one below the other, along a line on the left. |
| **Alternating sides** | Steps left and right of a central line, like a classic timeline. |
| **Horizontal** | Up to five steps in a row on desktop – compact, for short processes. |
| **Pinned story while scrolling** | The section stays pinned on screen and plays one step at a time as the shopper scrolls. The most immersive layout, and the default. |

On mobile, every layout is vertical.

## Options

- **Marker:** *Numbers* or *Dots* on the line.
- **Card style:** *Plain*, *Filled* or *Outline*.
- **Fill the line while scrolling:** the line fills and the steps light up as the shopper reaches them.

The Tally home page uses it for *How delivery and returns work*, and the About page for how products are made.

## All settings

Every setting in the order of the theme editor, with its options and its default value.

**Section: Timeline** (17 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Heading** | Rich text (one line) | Sample text |
| **Text** | Rich text | – |
| **Heading size** | Large · Medium · Small | Medium |
| **Heading alignment** | Left · Center | Center |
| **Layout** – Horizontal shows up to 5 steps in a row on desktop. On mobile every layout is vertical. | Vertical · Alternating sides · Horizontal · Pinned story while scrolling | Pinned story while scrolling |
| **Marker** | Numbers · Dots | Numbers |
| **Card style** | Plain · Filled · Outline | Filled |
| **Fill the line while scrolling** – Steps light up as the line reaches them. | Checkbox | On |
| **Color scheme** | Color scheme | Scheme 1 |

*Section spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Top padding** | 0–160px (step 4) | 80px |
| **Bottom padding** | 0–160px (step 4) | 80px |
| **Top padding on mobile** | 0–120px (step 4) | 56px |
| **Bottom padding on mobile** | 0–120px (step 4) | 56px |

*Advanced*

| Setting | Options | Default |
| --- | --- | --- |
| **Hide on mobile** | Checkbox | Off |
| **Hide on desktop** – Mobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| **Animate on scroll** | Checkbox | On |
| **Anchor ID** – Link to this section with #anchor-id. | Text | – |

## Block settings

**Block: Step** (4 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Label** – Small text above the title, such as a year or a duration. | Text | – |
| **Title** | Rich text (one line) | Sample text |
| **Text** | Rich text | Sample text |
| **Image** | Image | – |

## Related

- [Tabs](https://themelab.page/tally/docs/sections/tabs.md): Tabs with an image, heading, text and button each – a routine, materials or how an order works.
- [Image with text](https://themelab.page/tally/docs/sections/image-with-text.md): A photo beside text built from blocks – label, heading, text, list, stats and buttons – plain or on an overlapping card.
- [Multicolumn](https://themelab.page/tally/docs/sections/multicolumn.md): Columns with an icon or image, a heading, text and a link – for benefits, services and how it works.