Scrolling cards section
The Scrolling cards section in Seventh shows cards that stack and move as customers scroll, centered or split with media.
Applies to: Seventh 4.0.0 and later. Added in: Seventh 1.0.0. Last checked: 2026-10-12 against Seventh 4.0.0.
The Scrolling cards section pairs a column of images or videos with a column of text, and changes one column as customers scroll down the page. Each Scrolling card holds one media item and its text, so the section tells a story one card at a time.
Where to find it: select Add section in the theme editor, then choose Scrolling cards: centered or Scrolling cards: split.
What it shows
- Scrolling card blocks. Each card has an Image or Video and content blocks such as Caption, Heading, Text or Button.
- The layout, text style and spacing are set once in the section, for all cards.
- The cards scroll vertically, with the page.
The two presets show the two layouts:
- Scrolling cards: centered uses Type Fixed text content with Media position Center. The media scrolls through the middle of the screen while the text stays in place.
- Scrolling cards: split uses Type Fixed media with Media position Right and Media width 50%. The media stays in place on one side while the text scrolls past.
Type
Type decides which column moves:
- Fixed text content: the media of every card scrolls past with the page. The text column stays in place and shows the text of the card whose media is in the middle of the screen. Spacing between media blocks sets the gap between the media items.
- Fixed media: the text of every card scrolls past with the page. The media column stays in place and shows the media of the card that is in view.
Tip: Use "Fixed text content" for product showcases. Use "Fixed media" for storytelling or brand experiences.
Media
- Media width sets the width of the media column.
- Media position puts the media on the left, on the right or in the center.
- Fit media inside viewport (Fixed media only) keeps the whole media visible on screen.
- With Media position Center, Stack blocks on mobile devices decides whether mobile stacks the media and text or keeps the desktop layout.
Note: On mobile devices, media will be shown above the text content.
Text content
- Text container alignment (Fixed text content only) sets where the fixed text sits vertically on the screen.
- Text container width, Spacing between blocks and Text alignment style the text of every card.
Tip: Read about general section styling here: Seventh section general styles.
Scrolling card
Each card sets its own media, with its overlay and corner radius. Add Caption, Heading, Text, Button and other blocks inside it.
Why does the text change before the image?
Because with Type Fixed text content, the text column switches when the next media item reaches the middle of the screen. Increase Spacing between media blocks to give each card more scrolling time, or set it to None to keep the media items together.
Why does the media look cropped with Fixed media?
Because the fixed media fills the column height. Turn on Fit media inside viewport to show the whole image or video inside the screen height, or choose a smaller Media width.
All Scrolling cards settings
Every setting on this page, one list per section or block, with its type and default.
Accepts these blocks: Scrolling card.
Type (dropdown, default: Fixed text content): Sets which column moves while customers scroll. Fixed text content keeps the text in place while the media scrolls past; Fixed media keeps the media in place while the text scrolls past. Options: Fixed text content, Fixed media.
Spacing between media blocks (dropdown, default: Small): Sets the vertical gap between the scrolling media items, as a share of the screen height (XSmall 10, Small 25, Medium 50, Large 75 and XLarge 90 percent). Options: None, XSmall, Small, Medium, Large, XLarge. Shown only when Type is Fixed text content and Media position is not Center.
Scrolling cards section: Media
Where to find it: Scrolling cards → Media
Media width (dropdown, default: 33%): Sets the width of the media column, as a percentage of the section width. Options: 25%, 33%, 50%, 75%.
Fit media inside viewport (checkbox, default: off): Shows the whole fixed media inside the screen height, without cropping. Shown only when Type is Fixed media.
Media position (dropdown, default: Left): Sets where the media column sits: left, right or in the center of the section. Options: Left, Right, Center.
Spacing between media and content (dropdown, default: Small): Sets the space between the media column and the text column. Options: Small, Regular, Large, XLarge. Shown only when Media position is not Center.
On mobile devices, media will be shown above the text content. Shown only when Media position is not Center, or Media position is Center and Stack blocks on mobile devices is on.
Stack blocks on mobile devices (checkbox, default: on): Shows the media and the text one below the other on mobile. When off, mobile uses the desktop layout. Shown only when Media position is Center.
Add subtle parallax effect (checkbox, default: off): Moves the media at a different speed than the page while customers scroll.
Scrolling cards section: Text content
Where to find it: Scrolling cards → Text content
Text container alignment (dropdown, default: Center): Sets where the fixed text sits vertically on the screen. Options: Top, Center, Bottom. Shown only when Type is Fixed text content.
Text container width (dropdown, default: Large): Sets the maximum width of the text inside its column: Small 50, Medium 70 and Large 100 percent. Options: Small, Medium, Large.
Spacing between blocks (dropdown, default: Regular): Sets the vertical space between the blocks inside each card. Options: XSmall, Small, Regular, Large, XLarge.
Text alignment (alignment, default: Left): Sets the alignment of the text in every card.
Scrolling cards section: Section design
Where to find it: Scrolling cards → Section design
The Scrolling cards section uses the standard Section design settings, listed in General section styling. In this section the group has only Color scheme, Top padding and Bottom padding.
Color scheme (color scheme, default: Scheme 1).
Top padding (dropdown, default: Default). Options: Default, None, Smaller, Larger, Largest.
Bottom padding (dropdown, default: Default). Options: Default, None, Smaller, Larger, Largest.
Where to find it: Scrolling cards → Scrolling card.
Accepts these blocks: Heading, Text, Button, Icon, Empty space, Divider, Caption, Star rating, Content group, Countdown and Custom HTML / Liquid.
Image (image): Sets the media of the card.
Video (video): Plays a muted, looping video as the media of the card. When both a video and an image are set, the video is shown.
Media overlay (dropdown, default: Color): Sets the layer over the card media: a flat color or a gradient. Options: Color, Gradient.
Overlay color (color with transparency, default: transparent): Sets a color layer over the card media. The default is fully transparent. Shown only when Media overlay is Color.
Overlay gradient (gradient, default: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%)). Shown only when Media overlay is Gradient.
Corner radius (dropdown, default: None): Sets the corner rounding of the card media. Options: None, Slighty rounded, Rounded, Fully rounded.
Related pages
- General section styling: the Section design and Cards arrangement settings this section shares with others.
- Scrolling text section: a band of text, images or countdowns that scrolls sideways.
- Vertical slider section: full-size slides stacked one below the other.
Rich text grid
The Rich text grid section in Seventh places rich text cards in a row, simple, complex or full width. This page lists its section settings.
Scrolling text
The Scrolling text section in Seventh shows a moving band of text, images, icons, buttons or countdowns, for announcements and logo lists.