Stacked Cards
A scroll-driven stack of cards that reveals content as the visitor scrolls, with a parallax reveal effect between cards.
What It Does
The Stacked Cards module creates a scroll-driven experience where each card slides into view and stacks on top of the previous one as the visitor scrolls down. A section title and subtitle sit above the card stack. Each card has its own visual content, and the parallax reveal effect between cards creates a layered, depth-first presentation.
Best Used For
- Sequential feature walkthroughs where order matters
- Step-by-step process sections
- Phased product or service offerings
- Any content that benefits from a reveal-as-you-scroll narrative
Variants
Default
A vertically stacked set of cards with a scroll-triggered reveal. Cards accumulate as the visitor scrolls down the section.
Best for: Feature walkthroughs and phased process explanations
WithShadow
Cards with light backgrounds (white to light-grey gradients) against a contrasting section background, making the built-in card shadow clearly visible.
Best for: Demonstrating the depth and separation effect between stacked cards
Fields Reference
| Field | Type | Required | Description |
|---|---|---|---|
| sectionTitle | component | No | Heading displayed above the card stack, with configurable text styling |
| sectionSubtitle | component | No | Secondary heading below the section title, with configurable text styling |
| sectionBackground | component | No | Background colour or image for the entire section |
| cards | component | Yes | The stack of cards to reveal on scroll; each card has layout direction, number, title, description, images, button, and background |
Tips for Great Results
- Use 3 to 6 cards for the best scroll experience. Fewer than 3 loses the stacking effect; more than 6 creates scroll fatigue.
- Make each card visually distinct -- use different background colours or images so each card feels like a new reveal.
- Keep card content concise -- visitors are scrolling quickly, so prioritise headlines and short descriptions over long paragraphs.
- Ensure the section is tall enough to allow the stacking effect to fully play out before the visitor reaches the next section.
- Cards have a built-in shadow that is most visible when using light card backgrounds against a darker section background.
Supported Languages
Fully bilingual -- all text fields support both English and Thai content.