Layout marquee

Overview

A marquee layout block that creates a scrolling effect for its child blocks. It supports various customization options such as animation duration, pause on hover, reverse animation, and alignment settings. This block is ideal for showcasing featured content in a dynamic and engaging manner.

Common use cases

• Highlight important announcements or featured products with a scrolling marquee

• Adjust animation settings to create a smooth and visually appealing effect

• Consider the content length when setting the animation duration to avoid abrupt loops

• Use pause on hover for better user interaction

Compatible blocks

The following blocks can be nested within this block:

• Rich text

• Image

• Icon

• Button

• Container

Block settings

Content

Setting	Description	Options
Animation duration	Duration of the marquee animation in seconds	1 - 90 s (default: 60)
Enable pause on hover	Pauses animation when hovering over the marquee	Checkbox (default: false)
Enable reverse animation	Reverses the scroll direction	Checkbox (default: false)

Spacing

Setting	Description	Options
Top spacing	Padding space at the top of the marquee	0 - 300 px (default: 0)
Bottom spacing	Padding space at the bottom of the marquee	0 - 300 px (default: 0)
Enable horizontal padding	Adds horizontal padding around the marquee	Checkbox (default: false)

Color

Setting	Description	Options
Color scheme	Controls the background and text colors	• Body • Neutral • Accent 1 • Accent 2 • Accent 3 • Shade 1 • Shade 2 • Shade 3 • Primary • Secondary • Tertiary • Blur • Transparent (default)
Color border	Controls the border color	• Body • Subtle (default) • Strong • Primary • Secondary • Tertiary • None Visible when border position is not blank

Style

Setting	Description	Options
Block max height	Maximum height for block elements	0 - 500 px (default: 100)
Border position	Controls where borders appear	• None (default) • Top • Bottom • Left • Right • Top and bottom • Left and right • All

Layout

Setting	Description	Options
Vertical alignment	Controls vertical alignment of content	• Top • Middle (default) • Bottom

Display

Setting	Description	Options
Visibility	Controls when the block is visible	• All (default) • Mobile only • Desktop only
Scroll animation	Adds scroll-triggered animations	• None (default) • Fade • Slide up • Slide down • Slide left • Slide right • Zoom