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.

Tip: Read about general section styling here: Seventh section general styles.

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

Tip: Read more about general card styling here: Seventh card general styles.

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
  • 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

Troubleshooting

Cards not arranging correctly

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

Solutions:

  1. Check column values - Ensure column values add up correctly (total should be 12 or less per row)
  2. Verify row heights - Cards with more content will be taller
  3. Grid gap - Large grid gaps can affect alignment

Cards too small or too large

Problem: Cards appear too small or too large.

Solutions:

  1. Adjust card height - Increase or decrease the section's card height setting
  2. Change column span - Increase columns for larger cards, decrease for smaller
  3. Adjust row span - Increase rows for taller cards

Mobile display issues

Problem: Cards don't look good on mobile.

Solutions:

  1. Mobile settings - Adjust column and row settings for mobile
  2. Hide on mobile - Hide less important cards on mobile
  3. Test responsively - Always preview on mobile devices
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.