Seventh > Sections > Scrolling cards

Scrolling cards

The Scrolling cards section creates a horizontal scrolling display where cards scroll past a fixed media area or fixed text content. Perfect for creating engaging, interactive product showcases or storytelling experiences.

What it does

This section displays cards in a scrolling format where:

• Cards scroll horizontally while media or text stays fixed
• Two display modes: Fixed text content or Fixed media
• Cards can contain any content blocks
• Creates an immersive, interactive browsing experience

Section settings explained

Type options

Type: Controls the scrolling behavior:

• Fixed text content - Text area stays fixed while cards scroll
• Fixed media - Media area stays fixed while cards scroll

Media options

Media width: Controls how much space the media area takes

Fit media inside viewport

• When enabled: Media fits within the viewport
• When disabled: Media can extend beyond viewport

Only appears when "Fixed Media" type is selected

Media position: Where the media appears

Spacing between media and content

• Controls gap between media and scrolling cards

Only appears when media position is not "Center"

Stack blocks on mobile

• When enabled: Cards stack vertically on mobile
• When disabled: Cards maintain horizontal scroll on mobile

Only appears when media position is "Center"

Text content options

Spacing between media

• Controls vertical spacing between scrolling card groups
• Options: None, XSmall (10vh), Small (25vh), Medium (50vh), Large (75vh), XLarge (90vh)

Only appears when type is "Fixed Text Content" and media is not centered

Text container alignment

• Controls vertical position of text content
• Options: Top, Center, Bottom

Only appears when type is "Fixed Text Content"

Text width: Controls how wide the text content area is

Spacing between blocks

• Controls gap between blocks in the text content area

Text alignment

• Align text to left, center, or right

Scrolling card options

Each card in this section is a Scrolling card with these options:

Card content

• Can contain any common blocks (Heading, Text, Image, Button, Video, etc.)
• Cards scroll horizontally while media/text stays fixed
• Each card can have different content and styling

Card styling

Cards have standard card styling options:

• Text alignment
• Padding and spacing
• Background colors or images
• Border radius
• Color schemes

Common use cases

Product showcase with fixed media

• Use "Fixed media" type
• Place product images in the fixed media area
• Scroll through product details, features, or variations in cards
• Great for showing product collections

Storytelling with fixed text

• Use "Fixed text content" type
• Keep story text fixed
• Scroll through supporting images or content in cards
• Perfect for brand stories or product narratives

Interactive lookbook

• Use "Fixed media" type with center positioning
• Feature a main image in the center
• Scroll through related looks or products around it
• Creates an engaging browsing experience

Feature highlights

• Use "Fixed text content" type
• Keep feature descriptions fixed
• Scroll through feature images or examples
• Great for showcasing product features

Tips for Success

Layout

• Media position - Left/right works best for most use cases
• Media width - 33-50% provides good balance
• Card content - Keep card content focused and concise
• Spacing - Use appropriate spacing for readability

Content

• Card count - 3-6 cards work best for smooth scrolling
• Consistent styling - Use similar card styles for cohesion
• Clear hierarchy - Make the fixed content the focal point

Design

• Color contrast - Ensure text is readable on backgrounds
• Media quality - Use high-quality images for the fixed media

Mobile

• Mobile behavior - Media automatically moves above/below on mobile
• Stacking - Consider how cards stack on mobile devices