Marquee
An endless scrolling line of short texts with icons between them.
On this page
The Marquee widget scrolls a line of short texts across the screen without end, with a small icon between each one. Use it for a band of services, benefits or client names that adds movement to a page.
Add a Marquee
Open Insert in the left panel and find Marquee in the Marketing group, or type "marquee" in the search box. Drag it onto the canvas, or click it to add it next to the selected element. See Add elements.
A marquee usually runs the full width of the screen. Put it in a section and set that section's Content width to Full width. See Full width and boxed.
Add and edit items
Each text is a row in Items. Click Add item to add one and drag the handle to reorder. An item can have its own Icon before the text and a Link.
Set the speed with Loop duration (seconds): the time for one full loop, so a lower number is faster. Direction sets whether the line moves to the Left or the Right.
Content tab settings
| Setting | What it does |
|---|---|
| Items | The texts that scroll by. |
| Text (each item) | The text of the item. |
| Icon (each item) | An optional icon before the text. |
| Link (each item) | Makes the item a link. |
| Separator icon | The icon between items. Default: a sparkle. |
| Loop duration (seconds) | Time for one full loop; lower is faster (2–300). |
| Direction | Left or Right. Default: Left. |
| Pause on hover | Stops the movement while the pointer is over it. On by default. |
| Fade edges | Fades the text out at the left and right edges. |
Design tab settings
| Section | Settings |
|---|---|
| Text | Typography, Color (with a Hover tab for the Link color of items with a link), Text shadow, Outline text color (for hollow letters: set the text color to transparent and pick an outline color), Spacing, Item icon size, Item icon color. |
| Separator | Size, Color, Edge fade width (when Fade edges is on). |
The Design tab also has the sections every element shares: Spacing & position, Background & border and Mask. See Spacing, size & position.
Behaviour tab
The Behaviour tab has the settings every element shares: anchor and classes, entrance animations, motion effects, visibility per device, display conditions and interactions. See Motion & effects.
Tips
- Visitors who prefer reduced motion see the items as a still, wrapped line of text, so nothing important is lost.
- Short items of two or three words read best while they move.
- Large text from the Design System, such as the H3 style, gives the band presence without extra styling.