Scrolling images
Move a row of images or logos across the page.
Code name: Marquee · Category: Media
Registered in the live renderer. Website context and the limitations below still apply.
When to use it
Use a marquee for a small collection of logos or images you are entitled to display. Avoid motion when a static gallery communicates the information more clearly.
In the editor
- Choose the images and write their alt text.
- Set direction and speed.
- Check pause behaviour and readability in preview.
Example
This example uses illustrative content. Media placeholders must be replaced with your own assets; data-backed blocks need the normal website context.
<Marquee data={[{ id: 1, src: "/defaults/image_placeholder.svg", alt: "Replace with your own logo", previewUrl: "" }]} />Behaviour and limitations
- Items belong in data and use id, src, alt and previewUrl.
- Changing alt text should preserve src. Client logos must reflect real relationships.
- Test the resulting motion for accessibility; a settings reference is not an accessibility certification.
Content model
Edit marquee images and their alt text inside data. Preserve src unless the user asks to change the image.
Property reference
Types below describe the editor controls and known choices, not every value accepted by the renderer. A renderer default is extracted from its parameter; an editor-only default does not prove the runtime default. “Not declared here” does not mean required. Preserve omitted values unless the requested edit needs them.
| Property | Editor value type | Default evidence | Guidance |
|---|---|---|---|
data | array | [{"id":1,"src":"https://res.cloudinary.com/aurity/image/upload/v1730283703/logoipsum_265_c4604c8071.svg","alt":"alt","previewUrl":""},{"id":2,"src":"https://res.cloudinary.com/aurity/image/upload/v1730283702/logoipsum_264_ce5a5dc2cb.svg","alt":"alt","previewUrl":""},{"id":3,"src":"https://res.cloudinary.com/aurity/image/upload/v1730283700/logoipsum_254_66c1ee344b.svg","alt":"alt","previewUrl":""},{"id":4,"src":"https://res.cloudinary.com/aurity/image/upload/v1730283700/logoipsum_261_939dbf29b7.svg","alt":"alt","previewUrl":""}] (renderer) | Content Data. See the usage notes for this block. |
direction | "left", "right", "up", "down" | "left" (renderer) | Direction. See the usage notes for this block. |
speed | number | 30 (renderer) | Speed. See the usage notes for this block. |
loop | boolean | true (renderer) | Loop. See the usage notes for this block. |
pause | boolean | false (renderer) | Pause on Hover. See the usage notes for this block. |
hover | boolean | false (renderer) | Hover Effect. See the usage notes for this block. |
quickRepeat | boolean | true (renderer) | Repeat Elements. See the usage notes for this block. |
gradient | boolean | false (renderer) | Gradient. See the usage notes for this block. |
cardShadow | boolean | false (renderer) | Card Shadow. See the usage notes for this block. |
borderRadius | number | 10 (renderer) | Border Radius. See the usage notes for this block. |
gradientWidth | number | 200 (renderer) | Gradient Width. See the usage notes for this block. |
gradientColor | string | "rgba(248, 251, 253, 1)" (renderer) | Gradient Color. See the usage notes for this block. |
height | number | 75 (renderer) | Height. See the usage notes for this block. |
spacing | object | {} (renderer) | An object of spacing settings. Preserve existing responsive values when changing a single setting. |
animationType | "none", "fade-up", "fade-down", "fade-left", "fade-right", "flip-up", "flip-down", "flip-left", "flip-right", "zoom-in", "zoom-left", "zoom-right" | "" (renderer) | Entrance animation setting. Use a supported editor value; preserve it for unrelated edits. |
screenList | string | "" (renderer) | Comma-separated device names to hide on: mobile, tablet, desktop. An empty string hides on none. |
