Modules
Scrolling cards (Omni Pro)
This module ships in Omni Pro.
A heading with lead text and a carousel of cards where the card in the middle is in the spotlight. The side cards step back and take its place when the carousel moves. Available in Omni Pro. For the icon chip, dotted line and button above it, add a Section separator.
On this page
Set up the content
- Content → Heading: Write the Heading and Lead text. Wrap a phrase in asterisks to highlight it.
- Content → Cards: Add at least three cards with an Image (a landscape screenshot or illustration), a Title, Text and an optional Link or CTA. The link only shows on the card in the spotlight.
Choose the look
| Setting | Options |
|---|---|
| Styles → Layout → Heading layout | Heading left, lead right or Centered |
| Card style | Elevated (shadow under the spotlight card), Tinted, Outlined or Flat (side cards without a background) |
| Image style | Framed, Floating screenshot (the image on a tinted panel, offset and cropped like a product screenshot), Full width or None |
| Card width | Width of a side card; the cards shrink to the screen on phones |
| Spotlight size | How much larger the middle card is (1.0–1.3) |
| Side card opacity | How far the side cards step back |
| Show arrows, Autoplay, Seconds per card | Carousel controls; autoplay adds a pause button |
| Styles → Cards | Spotlight and side card backgrounds, image area background and ratio |
| Styles → Controls | Arrow and pause button colors |
| Styles → Corner | Card corner radius and the shadow on the spotlight card |
Good to know
- The cards loop without end: The card that leaves one side comes back on the other.
- Visitors can click a side card, use the arrows, swipe or drag, or press the keyboard arrows while the carousel has focus.
- Autoplay never runs in the editor, with animations off or for visitors who prefer reduced motion, and it pauses while the pointer or keyboard focus is on the carousel or the carousel is off screen.
- On dark backgrounds (Light text on dark background) the side cards use light text, while the spotlight card keeps its own colors.
- Content → Carousel labels holds the words screen readers use for the carousel, its buttons and the side cards.
- Background, module width, spacing and animation work the same in every module – see Backgrounds, Module width and inset panels and Animations.
More in this category
Keep reading
Support
Did this answer your question?
If not, write to us and say which page you were on.