# Marquee

> A band of large words and small images that glides across the screen in a loop. Use it for a slogan, the names of your collections or a playful break between sections.

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

## At a glance

- **In the editor:** Marquee
- **Where it goes:** Any page template, with Add section
- **In the presets:** Poster: Home page, About page
- **Settings:** 15
- **Blocks:** Text, Image
- **App blocks:** Yes

## Set it up

1. Add **Text** blocks for each word or phrase, with an optional **Link**.
2. Add **Image** blocks for small pictures between the words – product cut-outs or icons work well.
3. Pick a **Separator**: *Dot*, *Sparkle*, *Slash* or *Heart*.

## Options

- **Time to cross the screen:** how long one item takes to travel across the screen (10–90 seconds). Short and long messages move at the same pace.
- **Direction:** left or right.
- **Text size:** from 14 to 120 px – large sizes turn the marquee into a graphic band.
- **Show borders:** lines above and below the band.
- **Pause on hover:** stops the band while the pointer is on it, so links are easy to click.

The band stands still for shoppers who reduce motion. The default color scheme is the inverse band (scheme 4), so the marquee reads as a strip between sections.

## All settings

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

**Section: Marquee** (15 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Time to cross the screen** – Longer is slower. Short and long messages move at the same pace. | 10–90s (step 2) | 30s |
| **Direction** | Left · Right | Left |
| **Text size** | 14–120px (step 2) | 28px |
| **Separator** | Dot · Sparkle · Slash · Heart | Sparkle |
| **Show borders** | Checkbox | Off |
| **Pause on hover** | Checkbox | On |
| **Color scheme** | Color scheme | Scheme 4 |

*Section spacing*

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

*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: Text** (2 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Text** | Text | Sample text |
| **Link** | Link | – |

**Block: Image** (1 setting, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Image** | Image | – |

## Related

- [Announcement bar](https://themelab.page/tally/docs/sections/announcement-bar.md): A slim line of news above the header – delivery, returns, a sale – that rotates, scrolls or counts down.
- [Logo list](https://themelab.page/tally/docs/sections/logo-list.md): A row of logos – brands you stock, partners or press – in one calm color.