Marquee
An endless scrolling strip of texts, texts with icons and images, left, right, up or down, in up to three rows.
On this page
The Marquee widget scrolls a strip of items without end: texts, texts with an icon, and images, mixed in any order. It moves left, right, up or down, in one, two or three rows (columns when it moves up or down). Use it for a band of services or benefits, a wall of client logos, or scrolling columns of photos.
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 item is a row in Items. Click Add item to add one and drag the handle to reorder. Choose Text or Image at the top of the item: a text item can have an Icon before the text, an image item shows the image you pick. Any item can have 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 strip moves Left, Right, Up or Down; up and down marquees have a Height.
Rows and columns
Rows shows the items in two or three rows (columns when the marquee moves up or down), each starting at a different point so they never line up. With Alternate direction every other row moves the opposite way. Two rows of logos or three columns of photos are popular uses. The extra rows repeat the first one, so screen readers read the items once.
Images
Images in a left or right marquee share one Image height (Design → Images, default 64px) and keep their own shape, unless you choose an Aspect ratio. In an up or down marquee they fill the column (or the Image width you set). Border radius rounds them, and Grey until hovered shows logos and photos in greyscale until the pointer is on them. The images load just before the marquee scrolls into view, at the size they are shown.
Content tab settings
| Setting | What it does |
|---|---|
| Items | The texts and images that scroll by. |
| Item (each item) | Text or Image. Default: Text. |
| Text (each item) | The text of a text item. |
| Icon (each item) | An optional icon before the text. |
| Image (each item) | The image of an image item. |
| 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, Right, Up or Down. Default: Left. |
| Height | The visible height of an up or down marquee. Default: 420px. |
| Rows | 1, 2 or 3 rows (columns when moving up or down). Default: 1. |
| Alternate direction | Every other row moves the opposite way. On by default. Shown for 2 or 3 rows. |
| Item alignment | Start, Center or End of the column. Up and down marquees only. |
| Pause on hover | Stops the movement while the pointer is over it. On by default. |
| Fade edges | Fades the items out at the edges (top and bottom for up and down marquees). |
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), Space between rows (2 or 3 rows). |
| Images | Image height (left and right), Image width (up and down), Aspect ratio, Border radius, Grey until hovered. |
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 still: a wrapped line, or a grid of the images for columns, 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.