Stacked Cards

The Stacked Cards tab, on rows, turns the row's inner rows into cards. It has three kinds of effect: stacking effects, where each card sticks near the top of the screen and animates out of the way as the next card arrives to cover it, a bit like a deck of cards being dealt; Horizontal, where the row itself stays in view while the cards slide sideways as the page scrolls; and Scrolling strip, where the cards repeat in an endless row that drifts sideways as the page scrolls, for example testimonials. Use two rows with opposite Direction for a crossing effect.

Where to find it: click the pencil icon on a row to open its edit panel, then select the Stacked Cards tab.

The cards are the row's inner rowsCopy Anchor Link

Add an inner row to the row for each card. For the stacking effects, give each one a background and a Minimum Height in its own Layout tab. The front-end editor shows the cards as a plain list instead of stacking them, so they stay easy to edit. For Scrolling strip, cards are as tall as the tallest one, no Minimum Height needed.

SettingsCopy Anchor Link

Drag to ScrollCopy Anchor Link

Turn on Drag to Scroll for a Scrolling strip and visitors can take hold of it and pull it sideways, for example to read the next testimonial without waiting for it to drift by. The pointer turns into a grabbing hand over the strip.

• Mouse and touch. It works with a mouse and with a finger on a touch screen. On a touch screen, a sideways swipe drags the strip while an up or down swipe still scrolls the page, and pinch-zoom still works.
• It glides. After a drag the strip keeps going for a moment and slows to a stop, like a flick. Pressing on it stops it right away.
• It keeps drifting. Once it settles, the strip carries on moving with the page scroll from where the visitor left it.
• It never runs out. The strip loops endlessly in both directions, so it can be dragged as far as the visitor likes.
• Links still work. A click on a link or button inside a card follows it as usual. Only a drag, which starts after the pointer moves a few pixels, moves the strip and doesn't count as a click.

Browser supportCopy Anchor Link

The sticking and stacking itself works in any modern browser, and so do the horizontal and scrolling strips. The sliding, drifting, and the animation between stacked cards all need CSS scroll-driven animations. Without that support, stacked cards still stick and stack (just without the animated transition), and horizontal cards and the scrolling strip both show as a strip you can scroll sideways instead of animating on their own. Visitors who prefer reduced motion see the same fallback: stacked cards stick and stack without the animation, and horizontal cards and the scrolling strip show as a swipeable, scrollable strip. With Drag to Scroll on, visitors who prefer reduced motion can still drag the sideways scroll with a mouse, without the glide. Touch screens and trackpads scroll it as they do any strip. The front-end editor also shows horizontal cards and the scrolling strip as a strip you can scroll sideways, so they stay easy to edit. For the scrolling strip, the cards it repeats to fill the strip are hidden from screen readers.

Build a horizontal card sectionCopy Anchor Link

A row of cards that slides sideways while the row stays pinned in view, each card an image next to text with a button at the bottom.

1. Edit the row and, on its General tab, set Row stretch to Stretch row and content (no paddings).
2. On the Stacked Cards tab, set Stacked Cards to Horizontal and set Sticky Top to match your sticky header height.
3. On the row's column, add padding in Design Options: that padding becomes the space around the card strip.
4. Add an inner row for each card. Give each inner row two columns: one for a background image, one for text. Give each inner row a Border Radius in Design Options so the cards have rounded corners.
5. On the text column, open its Layout tab and set Content Direction to Stack vertically and Distribute Content to Start, last element at the end, so any button in that column sits at the bottom of the card no matter how much text is above it.

Build a scrolling testimonial wallCopy Anchor Link

Two stretched rows of cards drifting past each other in opposite directions, each card a short testimonial with a name and photo.

1. Add two rows. On each one's General tab, set Row stretch to Stretch row and content (no paddings).
2. On the first row's Stacked Cards tab, set Stacked Cards to Scrolling strip: an endless row of cards drifts sideways. Do the same on the second row, but set its Direction to To the right, so the two strips cross.
3. On each row, set row spacing with Design Options, for example 18px bottom padding and no margin. On the row's column, set the top padding to 0.
4. Add an inner row for each testimonial. On its column, set a background color, padding, and a border radius in Design Options, then on the column's Layout tab set Content Direction to Stack vertically and Distribute Content to Start, last element at the end.
5. Inside each card, add a Custom Heading for the title, a Custom Heading (tag p) for the quote, and a Circle Images element with one photo, its Title set to the person's name and Text set to a short line such as "Member since Jan 2026".

RelatedCopy Anchor Link