Marquee block

The Blocksify Marquee block creates a CSS-only scrolling strip for text, image, and icon items in a repeated track. Use it for logo walls, brand strips, or ticker-style content inside a Section block.

At a glance

Block name	blocksify/marquee
Content model	Items edited from the block inspector.
Item types	Text, image, and icon.
Animation	CSS-only horizontal motion with a repeated group for seamless looping.
Default motion	Medium speed, pause on hover on, edge fade on, repeat items set to 3.
Key supports	Wide and full alignment, background color, border, radius, shadow, spacing, visibility, item styling, media styling, icon styling, and text styling.

Where to find it

1. Open the block inserter and choose Blocksify → Marquee. The Marquee is added with seeded text items.
2. Select the Marquee block on the canvas.
3. Use Settings for items, Animation for movement, and Styling for item, image, icon, and text styles.

When to use it

Use Marquee when repeated content should move across one horizontal band. It is a strong fit for partner logos, technology badges, client names, short announcements, or a compact media strip.

For static media layouts, use the Image block instead. For a single icon treatment, use the Icon block.

Items and links

Marquee items are edited from the block inspector. Each item can carry a link, target, relationship value, per-item alignment override, and per-item styling override.

Item type	Settings
Text	Text content plus optional link and per-item styling.
Image	Media selection, alt text from the media item, optional spin, link, alignment, and styling.
Icon	Icon library selection, size, optional spin, link, alignment, and styling.

Blocksify displays two identical item groups in the moving track. The repeated group is marked aria-hidden="true", so assistive technology reads the content only once.

Animation controls

The animation repeats the item group continuously without adding frontend JavaScript. Use the motion controls to tune the strip before publishing.

Control	What it changes
Speed	Higher values make the strip move faster; lower values slow it down.
Direction	Sets whether the strip moves left or right.
Pause on hover	Pauses the track on hover when enabled.
Edge fade	Adds a soft fade at the edges, with configurable fade width.
Repeat items	Repeats the item set within each group to help fill the row.

A CSS-only loop is seamless when the item set is at least as wide as the row. If a small set leaves a gap, add more items or increase Repeat items.

Style capabilities

Marquee styling is split between the outer block, the repeated item surfaces, and each item kind. The outer block carries background color, border, radius, shadow, spacing, and visibility.

Style surface	What it controls
Gap	Responsive spacing between repeated items.
Align items	Cross-axis alignment for each group, with per-item overrides available.
Item	The base item wrapper, seeded with padding.
Image	The media image surface, including logo sizing controls.
Icon	The icon SVG surface, including color and box-style controls.
Text	The text surface, seeded with a large font-size style.

The edge fade mask lives on the inner viewport, not the outer block, so box shadow and border styling can still render on the outer Marquee.

Responsive item gaps and hover-aware style settings follow the same model explained in responsive and hover editing. Because the motion is CSS-only, it aligns with the performance model in How Blocksify keeps your site fast.

Accessibility notes

• The duplicate group is hidden from assistive technology with aria-hidden="true".
• The prefers-reduced-motion media query stops the animation for visitors who request reduced motion.
• Image items use authored alt text from the media item.
• Links keep real href, target, and rel attributes.

Tips

• Keep text items short so they remain readable while moving.
• Use similar image dimensions for logo strips.
• Increase repeat items before adding custom CSS when the track has too much empty space.
• Leave pause on hover enabled for interactive or linked marquees.
• Check reduced-motion behavior before publishing an attention-heavy strip.

Related articles

• Image block
• Icon block
• Responsive and hover editing
• How Blocksify keeps your site fast