Sticky stack
In the Sticky stack, cards stick near the top of the screen and the next card slides over the previous one as visitors scroll. Each card has an image, a small label, heading, text, a readout with a meter, and a button.
How to set it up
Step 1: Add the Sticky stack section
- In the theme editor, open the page you want and click Add section under Template.
- Search for Sticky stack and select it (1).
Step 2: Set up the stack
- Set the card title Typography and Font scale, and the Distance from header (1).
Step 3: Add cards
- Add Card blocks: an image (and mobile image), image fit and position, a card background and text scheme, a label, heading and text, a readout value, unit, label and meter, and a button.
Settings reference
Sticky stack
| Typography | Options: Display, Heading, Subheading. |
|---|---|
| Font scale | 100% is the size of this style in Theme settings > Typography. |
| Font scale on mobile | Slider. |
| Distance from header | Slider. |
Card block
| Image | An image from your files. |
|---|---|
| Mobile image | An image from your files. |
| Image fit | Options: Fill, Show whole image. |
| Image position | Options: Left, Right. |
| Card background | |
| Text color scheme | Colors from Theme settings > Colors. |
| Small label | |
| Heading | |
| Text | |
| Readout value | |
| Readout unit | |
| Readout label | |
| Readout meter | Slider. |
| Button label | |
| Button link | Where the link goes. |
Section width, corners, padding, color scheme, divider and visibility work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.
How it works
- Visitors who prefer reduced motion still see the cards stack, without the scaling effect.