Seventh > Sections > Flexible cards

Flexible Cards

The Flexible Cards section creates a flexible grid layout where you can add cards with customizable sizes. Each card can span different numbers of columns and rows, allowing you to create dynamic, magazine-style layouts.

Seventh - flexible cards

What It Does

This section displays cards in a flexible grid system where:

Cards can span different column widths (2-12 columns on desktop)
Cards can span different row heights (1-4 rows)
Cards automatically arrange in a masonry-style grid
Each card can contain any blocks you want (images, text, headings, buttons, etc.)

Section Settings Explained

Layout Options

Card Height (Desktop)

Controls the base height of cards in the grid on desktop
Range: 1-10 (default: 3)
Lower values = shorter cards, higher values = taller cards
Cards with more content will naturally be taller

💡 Tip: Use height 3-5 for balanced layouts. Lower values work well for image-heavy cards.

Card Height (Mobile)

Controls the base height of cards on mobile devices
Range: 1-10 (default: 3)
Can be different from desktop for mobile-optimized layouts

Grid Gap Controls the spacing between cards

💡 Tip: Use "Regular" or "Large" for clean, spacious layouts. "None" creates a seamless grid.

Section Header

Section Header Block

Optional header area for the section
Can contain Heading, Text, Button, and other common blocks
Positioned above the card grid

Section Design Options

Color Scheme

Choose from your theme's color schemes
Applies to the entire section

Top Padding

Controls space above the section
Options: None, Smaller, Default, Larger, Largest

Bottom Padding

Controls space below the section
Options: None, Smaller, Default, Larger, Largest

Extend Section Width

When enabled: Section extends to full browser width
When disabled: Section stays within container width

Show Media Background

When enabled: You can add a background image or video
When disabled: Uses solid color background

Background Image/Video (Only appears when "Show Media Background" is enabled)

Upload an image or video for the section background

Background Overlay (Only appears when background is set)

Add a color overlay on top of the background
Adjust transparency for subtle effects

Parallax Effect (Only appears when background is set)

Adds a scrolling parallax effect to the background
Options: None, Subtle, Medium, Strong

Push Content Down (Only appears when background is set)

Adjusts how content sits on the background

Make Section Full Height

Makes the section fill the entire viewport height

Flex Card Options

Each card in the Flexible Cards section is a Flex Card with these options:

Grid Position

Column (Desktop)

Controls how many columns the card spans on desktop
Range: 2-12 columns (default: 4)
12 columns = full width
6 columns = half width
4 columns = one-third width
3 columns = one-quarter width
2 columns = one-sixth width

Row (Desktop)

Controls how many rows the card spans on desktop
Range: 1-4 rows (default: 1)
Higher values create taller cards

Hide on Mobile

When enabled: Card is hidden on mobile devices
When disabled: Card appears on mobile with mobile settings

Column (Mobile) (Only appears when "Hide on Mobile" is disabled)

Controls how many columns the card spans on mobile
Options: 1 column or 2 columns
Default: 1 column (full width)

Row (Mobile) (Only appears when "Hide on Mobile" is disabled)

Controls how many rows the card spans on mobile
Options: 1 row or 2 rows
Default: 1 row

Content Alignment

Vertical Position Controls how content aligns vertically within the card:

Top - Content aligns to the top (default)
Center - Content aligns to the center
Bottom - Content aligns to the bottom
Stretch - Content stretches to fill the card height

Stretch Type (Only appears when "Stretch" is selected)

Space Between - Content spreads with space between elements
Space Around - Content spreads with space around elements

Card Styling

Text Alignment

Align text to left, center, or right

Inner Blocks Spacing

Controls gap between blocks inside the card
Options: XXSmall, XSmall, Small, Regular, Large, XLarge

Padding

Controls space inside the card
Options: XSmall, Small, Regular, Large, XLarge, XXLarge
Only visible when background is shown

Add Padding to Media

When enabled: Adds extra padding around images and videos
Only visible when background is shown

Remove Card Background

When enabled: Card has no background
When disabled: Card shows background with padding

Border Radius

Controls rounded corners on the card
Options: 0px, 5px, 10px, 30px
Only visible when background is shown

Color Scheme

Apply theme color schemes to the card

Card Link

Link

Add a URL to make the entire card clickable

Open Link in New Tab

When enabled: Link opens in a new browser tab
Only appears when a link is set

Card Background

Show Background

When enabled: You can add a background image or video to the card

Background Image/Video (Only appears when "Show Background" is enabled)

Upload an image or video for the card background

Background Overlay (Only appears when background is set)

Add a color overlay on top of the background
Adjust transparency

Available Blocks in Flex Cards

Each Flex Card can contain any of these blocks:

Common Blocks:

Heading
Text
Image
Button
Video
Icon
Divider
Empty Space
Caption
Star Rating
Group (to organize multiple blocks)

Special Blocks:

Custom (for custom HTML/Liquid)
App blocks (from installed apps)

Common Use Cases

Magazine-Style Layout

Mix large and small cards for visual interest
Use 6-12 column cards for featured content
Use 2-4 column cards for supporting content
Vary row heights for dynamic layouts

Product Showcase

Create product grids with varying card sizes
Use larger cards for featured products
Use smaller cards for supporting products
Add product information blocks inside cards

Image Gallery

Create Pinterest-style image grids
Mix portrait and landscape images
Use different card sizes for visual hierarchy
Add captions or text overlays

Content Grid

Display blog posts, articles, or pages
Use consistent card sizes for uniform look
Or vary sizes for editorial-style layouts
Add article blocks inside cards

Tips for Success

Grid Layout

Plan Your Layout - Sketch out your grid before adding cards
Use Large Cards Sparingly - Large cards (8-12 columns) work best for featured content
Balance Sizes - Mix different card sizes for visual interest
Consistent Heights - Use similar row values for uniform card heights

Content

Keep It Focused - Don't overcrowd cards with too much content
Use Groups - Organize related blocks with Group blocks
Mobile Considerations - Test how cards stack on mobile devices

Design

Color Schemes - Use consistent color schemes across cards
Spacing - Use appropriate grid gap for your content type
Backgrounds - Subtle card backgrounds can help content stand out

Performance

Image Optimization - Optimize images used in cards
Limit Cards - Too many cards can slow down the page
Test Loading - Check how the section loads on slower connections

Troubleshooting

Cards Not Arranging Correctly

Problem: Cards don't align properly in the grid.

Solutions:

Check Column Values - Ensure column values add up correctly (total should be 12 or less per row)
Verify Row Heights - Cards with more content will be taller
Grid Gap - Large grid gaps can affect alignment

Cards Too Small or Large

Problem: Cards appear too small or too large.

Solutions:

Adjust Card Height - Increase or decrease the section's card height setting
Change Column Span - Increase columns for larger cards, decrease for smaller
Adjust Row Span - Increase rows for taller cards

Mobile Display Issues

Problem: Cards don't look good on mobile.

Solutions:

Mobile Settings - Adjust column and row settings for mobile
Hide on Mobile - Hide less important cards on mobile
Test Responsively - Always preview on mobile devices

Content Overflow

Problem: Content overflows from cards.

Solutions:

Reduce Content - Remove some blocks or text
Increase Card Size - Use more columns or rows
Adjust Padding - Reduce card padding to fit more content