Marquee

Continuous horizontal strips of small cards that drift on their own, like the rows on a streaming service. One to three rows, each sliding left or right at a constant speed; two opposing rows read as motion with depth. A Mode picks what each card holds: a feature (icon + title + subtitle), an image (a photo or a logo), or a testimonial (a star rating + quote + person). It turns a set of features, work samples, logos, or proof points into an ambient band of motion you glance at rather than click through. The drift is a single smooth, continuous CSS animation, so it loops flash-free and never stutters at the wrap.

When to use it

A "feature soup": many small capabilities shown ambiently, no single card demanding attention (Icon mode)
A "works with" / integrations strip, or a "trusted by" client-logo wall (Image mode, Logo style)
A portfolio / recent-work strip of project photos (Image mode, Photo style)
A moving "wall of love" of short customer quotes (Testimonial mode)
A band of gentle motion between two heavier sections

When not to use it

A static, readable, Google-verified proof panel visitors are meant to study — use Reviews
Interactive two-sided cards a visitor flips one at a time — use a Flip Box grid
Discrete slides a visitor pages through — use Carousel or Slider
Capabilities that connect to each other — use Network
A single icon and label — use Icon Card

Modes: Icon, Image, Testimonial

A Mode toggle at the top of the panel picks what each card holds: Icon (feature: icon + title + subtitle), Image (a photo or a logo), or Testimonial (a star rating + quote + person). All three modes share the same drift engine, rows, speed, sizing, faded edges, pause on hover, and the full-width rule — only the card body changes. Switching mode swaps in mode-appropriate starter cards so the strip is never empty. Each mode is detailed below.

Icon mode

The original card: a Lucide icon, a bold title, a muted subtitle, an optional link, and an optional hover-detail line. Use it for a feature/capability soup or a "works with" strip. Its fields are the ones under Cards below.

Image mode: photos and logos

Each card is a picture from the media library. Use it for a client-logo wall ("trusted by") or a portfolio strip of work photos. Two sub-toggles shape it.

Style — Photo · Logo:

Photo — the image fills a framed, rounded card. For work samples, a

portfolio or gallery strip, project photos.

Logo — a transparent card with the image contained (not cropped),

shown grayscale and returning to full colour on hover. For a "trusted by" / client-logo wall.

Caption — Below · Overlay · On hover · None:

Below (default) — caption sits under the image, in the card body.
Overlay — caption sits on the image over a dark gradient scrim, always

visible. The gallery look; stays readable over any photo.

On hover — image only at rest; the caption fades up on hover.
None — no caption. The right choice for a logo wall.

Image cards: { image_id, caption, link, row }. image_id is the media-library attachment id; a raw image URL also works. Style and Caption apply only in Image mode. For a logo wall, Logo style + Caption None; for recent work, Photo style + Caption Below or Overlay.

Testimonial mode: a moving wall of quotes

Each card is a short quote: a gold star rating, the quote text, and the person (optional avatar + name + role). It is an ambient, moving "wall of love" — a proof ticker you glance at, not a panel you read line by line. The star colour reuses the Icon swatch (gold #fbbc04 by default).

Testimonial cards: { quote, name, role, rating, avatar_id, row }. rating is 0–5; avatar_id is a media-library id (a raw avatar URL also works). Keep quotes short — one to three lines — because they are moving.

Testimonial mode vs the Reviews block. They look similar but do different jobs. Reach for Marquee testimonial when you want moving, ambient quotes as page texture: a decorative band of positive lines with no header. Reach for the Reviews block when you want a static, readable, Google-verified proof panel with the Google header (logo, aggregate rating, "N reviews", "Write a review") that a visitor studies near a CTA. Rule of thumb: moving accent strip → Marquee testimonial; trust panel people read → Reviews. See blocks/reviews.

Placement — always full width

A Marquee is ALWAYS full-width / section-wide. Place it as a direct child of a full-width section: set the section's content width to 100 and clear any max content width so the strip runs edge to edge. Never put a Marquee inside a Grid or Columns cell, or any narrow or width-capped column. A marquee that is not the full width of its section looks broken: the faded edges collapse and the loop stutters. Give the section a transparent or a single solid-band background and let the rows fill it.

Rows and direction

Rows: 1 to 3

How many strips stack vertically. Two is the signature look.

Row direction: Left / Right, per row

Each row scrolls its own way. Two rows in opposite directions (row 1 left, row 2 right) is the streaming-service look and the default.

Motion and size

Speed: 1 (slow) to 10 (fast)

Constant drift speed, the same for every row, independent of how many cards a row has.

Width: 120 to 360px

Card width. Padding, icon, and text all scale off it, so one slider takes cards from compact to a large showcase strip. Image and testimonial cards use the same width control.

Height: 0 to 240px

A minimum card height (0 = size to content). Use it to give the cards a taller, more even band. Image cards use it as the picture height.

Radius: 0 to 40px

Card corner rounding.

Faded edges: toggle (default on)

Fades the left and right ends of each row so cards ease in and out instead of hard-cutting at the edge. The streaming-service signature.

Pause on hover: toggle (default on)

The row a visitor hovers stops, so they can read (and click) a card.

Card style

Four colour swatches set the look of every card. Leave any blank to keep the neutral default that reads on both light and dark sections.

Card — card background.
Text — title and subtitle colour (falls back to the section's text colour).
Icon — icon colour, and the testimonial star colour (falls back to the text colour; gold by default).
Border — card border colour.

Reveal detail on hover: toggle (default off)

When on, hovering a card cross-fades its front (icon + title + subtitle) to a longer Hover detail line, in the same box — no flip, no resize. Only cards that have Hover detail text react. Icon mode only. Leave it off for a purely ambient strip.

Cards

The list of cards. Card fields depend on the Mode (see Modes above for Image and Testimonial fields). In Icon mode, each card has:

Icon — opens the icon picker (the Lucide library).
Title — the bold line.
Row — which row the card belongs to (Row 1 / 2 / 3).
Subtitle — the muted line under the title.
Link — optional; the whole card becomes a link. New tab opens it in a new tab.
Hover detail — optional; shown on hover when Reveal detail on hover is on.

In Image mode each card is an image + optional caption + optional link; in Testimonial mode each card is a quote + person + star rating. + Add card adds one in the current mode; the card's x removes it.

Element shape

The cards are stored as a JSON array on the block's cards setting. The mode setting picks the card body. An Icon-mode element:

``json { "type": "marquee", "settings": { "mode": "icon", "row_count": 2, "speed": 5, "card_width": 200, "edge_fade": true, "pause_hover": true, "dir_0": "left", "dir_1": "right", "cards": [ { "icon": "search", "title": "Found on Google", "subtitle": "Built-in SEO", "link": "", "row": 0 }, { "icon": "shopping-bag", "title": "Storefront", "subtitle": "Sell online", "link": "", "row": 0 }, { "icon": "calendar", "title": "Bookings", "subtitle": "Schedule and pay", "link": "", "row": 1 }, { "icon": "message-circle","title": "Smart chat", "subtitle": "SMS and WhatsApp", "link": "", "row": 1 } ] } } ``

An Image-mode element (logo wall):

``json { "type": "marquee", "settings": { "mode": "image", "image_style": "logo", "caption_pos": "none", "row_count": 1, "speed": 5, "card_width": 180, "card_height": 70, "cards": [ { "image_id": 78, "row": 0 }, { "image_id": 79, "row": 0 }, { "image_id": 80, "row": 0 } ] } } ``

A Testimonial-mode element:

``json { "type": "marquee", "settings": { "mode": "testimonial", "row_count": 1, "speed": 4, "card_width": 300, "icon_color": "#fbbc04", "cards": [ { "quote": "On time, tidy, and the result looks fantastic.", "name": "Sarah M.", "role": "Homeowner", "rating": 5, "row": 0 }, { "quote": "Clear pricing up front, no surprises.", "name": "David L.", "role": "Contractor", "rating": 5, "row": 0 } ] } } ``

Per-block keys: mode (icon | image | testimonial), image_style (photo | logo, Image mode), caption_pos (below | overlay | hover | none, Image mode), card_width, card_height, card_radius, card_bg, text_color, icon_color, border_color, hover_reveal (bool, Icon mode), edge_fade (bool), pause_hover (bool), dir_0 / dir_1 / dir_2 (left | right). Per Icon card: icon, title, subtitle, link, new_tab, back (hover-detail line), row. Per Image card: image_id (or image URL), caption, link, row. Per Testimonial card: quote, name, role, rating (0–5), avatar_id (or avatar URL), row.

What is not configurable in the panel

Loop seamlessness: each row repeats its cards enough to loop with no visible seam. Automatic.
The drift itself: constant linear speed (a marquee stutters if it eases). Fixed.
Editor preview: the drift animates live in the builder, in Preview, and on the page (it is a pure CSS animation, no script). Hover-reveal also previews on hover in the builder.

blocks/reviews — the static, Google-verified proof panel (vs Marquee testimonial's moving ambient strip)
blocks/carousel — discrete slides a visitor pages through
blocks/network — capabilities that connect to each other
blocks/icon-card — a single icon and label
blocks/section — wraps a marquee; use for the full-width band