> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/global-sections/storytelling/scrolling-cards.md).

# Scrolling cards

A set of cards that pin and stack on top of each other as the visitor scrolls, showing one card at a time. Good for "How it works" steps, brand values, or a sequence of product features.

![Scrolling Cards overview](/files/fRc7wAjNnQ2k6rmQoUVe)

***

## Settings

### Layout

| Setting                 | Description                                                                                                                                                                                                                         |
| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Width                   | **Page** — Keeps the content within the page width set in your theme settings. **Full** — Stretches the content across the full browser width, with a small space at the edges. **Custom** — Sets a specific maximum content width. |
| Custom width            | Maximum width of the section. Shown when Width is Custom.                                                                                                                                                                           |
| Enable sticky on mobile | Keeps the pin-and-stack effect on mobile. Turn it off to show the cards as a plain stacked list on small screens.                                                                                                                   |

### Header spacing

| Setting | Description                                             |
| ------- | ------------------------------------------------------- |
| Desktop | Space between the header and the first card on desktop. |
| Mobile  | Space between the header and the first card on mobile.  |

### Background

| Setting         | Description                                         |
| --------------- | --------------------------------------------------- |
| Media           | Add a background image or video for the section.    |
| Video           | A Shopify-hosted background video. Autoplays muted. |
| Image           | Background image.                                   |
| Image (mobile)  | Separate background image for mobile.               |
| Overlay         | Adds a color layer over the background media.       |
| Overlay color   | Color and opacity of the overlay.                   |
| Parallax effect | Scroll motion applied to the background media.      |

### Color

| Setting      | Description             |
| ------------ | ----------------------- |
| Color scheme | Colors for the section. |

### Padding

| Setting           | Description                                    |
| ----------------- | ---------------------------------------------- |
| Top / Bottom      | Space above and below the section.             |
| Custom for mobile | Set separate top and bottom padding on mobile. |

***

## Available Blocks

### Header

The heading area above the cards. Add **Subheading**, **Heading**, and **Text** child blocks inside it — see [Header](/helix/theme-blocks/basic/header.md).

### Card

A single card in the stack. Add one card per step or point in the sequence.

#### Card Settings

| Setting              | Description                                                                |
| -------------------- | -------------------------------------------------------------------------- |
| Direction            | Lay the card's content out in a row or a column.                           |
| Position / Alignment | How the content sits within the card.                                      |
| Vertical on mobile   | Stack the card's content in a column on mobile.                            |
| Gap                  | Space between the blocks inside the card, set for desktop and mobile.      |
| Border thickness     | Width of the border around the card.                                       |
| Corner radius        | Roundness of the card's corners. Choose Custom to set an exact value.      |
| Shadow               | Drop shadow depth.                                                         |
| Background media     | Give the card no background, a background image, or a background video.    |
| Overlay              | Adds a color layer over the card's background.                             |
| Backdrop blur        | Blurs whatever sits behind the overlay.                                    |
| Color scheme         | Colors for the card.                                                       |
| Padding              | Inner space around the card content, with optional separate mobile values. |

#### Card Blocks

| Block                                                             | Description                                        |
| ----------------------------------------------------------------- | -------------------------------------------------- |
| [Heading](/helix/theme-blocks/basic/heading.md)                   | Main headline.                                     |
| [Subheading](/helix/theme-blocks/basic/subheading.md)             | Small label above or below the heading.            |
| [Text](/helix/theme-blocks/basic/text.md)                         | Rich-text paragraph for supporting copy.           |
| [Button](/helix/theme-blocks/basic/button.md)                     | Single call-to-action with label, link, and style. |
| [Buttons](/helix/theme-blocks/basic/buttons.md)                   | Two side-by-side buttons.                          |
| [Image](/helix/theme-blocks/basic/image.md)                       | Inline image within the card.                      |
| [Video](/helix/theme-blocks/basic/video.md)                       | An uploaded or external video.                     |
| [Icon](/helix/theme-blocks/basic/icon.md)                         | An icon from the theme library.                    |
| [Image comparison](/helix/theme-blocks/basic/image-comparison.md) | Before-and-after images with a draggable handle.   |
| [Group](/helix/theme-blocks/layout/group.md)                      | A container that arranges several blocks together. |
| [Divider](/helix/theme-blocks/layout/divider.md)                  | A horizontal line between content blocks.          |
| [Spacer](/helix/theme-blocks/layout/spacer.md)                    | Empty block for adjusting vertical spacing.        |
| [Popup](/helix/theme-blocks/links/popup.md)                       | A button that opens an overlay.                    |
| [Product Card](/helix/theme-blocks/cards/product-card-compact.md) | A compact product card.                            |

{% hint style="info" %}
**Tip:** A card's background is a full media slot, so you can give one card a video backdrop while the others stay still. Used on a single card, that contrast makes one step stand out.
{% endhint %}