Creates a stacked card carousel where cards are layered on top of each other with depth perspective. Click the trigger button to animate the front card away and reveal the next one. Features customizable scaling, offsets, autoplay, and smooth CSS transitions. Perfect for testimonials, feature showcases, or any content that benefits from a card deck presentation.

Card One

This is the first card in the stack

Card Two

This is the second card in the stack

Card Three

This is the third card in the stack

Structure

Visible Cards 1-5

Number of cards visible in the stack at once. Cards beyond this number are hidden behind the stack and will appear as others are dismissed.

Default: 3

Show Trigger on/off

When enabled, the last child element inside the container acts as the trigger button. When disabled, no trigger is created and you can use autoplay or custom JavaScript to control the deck.

Default: On

Stack Top Padding 0-200 pixels

Extra padding at the top of the stack wrapper. Increase this if your cards are getting clipped at the top during animations.

Default: 60

Scaling

Second Card Scale 0.5-1.0

Scale factor for the second card in the stack. Lower values make it appear further back. Use values close to 1 for subtle depth, lower values for dramatic perspective.

Default: 0.95

Third Card Scale 0.5-1.0

Scale factor for the third card and beyond. Should be smaller than the second card scale to maintain depth illusion.

Default: 0.90

Offsets

Second Card Offset -100 to 0 pixels

Vertical offset for the second card. Negative values move it up, creating the stacked appearance where back cards peek above the front card.

Default: -28

Third Card Offset -150 to 0 pixels

Vertical offset for the third card. Should be more negative than the second offset to stack cards progressively higher.

Default: -56

Exit Distance 100-600 pixels

How far the front card travels downward when dismissed. Larger values create more dramatic exits but require more space below the stack.

Default: 340

Animation

Duration 0.2-3.0 seconds

Duration of the card transition animation. Lower values feel snappy and energetic, higher values feel smooth and elegant.

Default: 1

Autoplay

Autoplay on/off

Automatically cycles through cards at a set interval. When enabled, cards will animate without user interaction. The trigger button still works when autoplay is active.

Default: Off

Autoplay Interval 1-10 seconds

Time between automatic card transitions when autoplay is enabled. Shorter intervals create faster cycling, longer intervals give viewers more time to read each card.

Default: 3

Performance

This element uses pure CSS transitions with GPU-accelerated transforms for smooth 60fps animations. Cards are positioned using transform properties which don't trigger layout recalculations. The component automatically measures card heights and adjusts the container accordingly. Works seamlessly with Bricks Builder's live preview.