Flex cards section
The Flex cards section places cards side by side on a 12-column grid in Split, each with media and theme blocks, for promotions and features.
Applies to: Split 5.1.0 and later. Added in: Split 5.0.0. Last checked: 2026-10-13 against Split 5.1.0.
The Flex cards section places cards side by side on a 12-column grid, each card with an image or video on top and theme blocks below it. The bundled preset holds four promotion cards in two rows, 7 + 5 and 5 + 7 columns wide.
Where to find it: select Add section in the theme editor, then choose Flex cards (in the Promotions category).
How the cards fill the row
Each card is a Card block. Its Desktop columns setting (2 to 12) says how many of the 12 grid columns it takes on screens 768 px and wider.
- Cards are placed left to right. When the next card does not fit in the columns left in the row, it starts a new row.
- Make the cards of one row add up to 12, for example 7 + 5, 6 + 6 or 4 + 4 + 4. A row that adds up to less leaves an empty space on the right.
- On screens narrower than 768 px every card takes the full width, one under the other.
- Hide on mobile on a card hides it on phones and on tablets held upright.
The cards have a 1 px line on their top and right edges, in the grid border color from Colors theme settings, like the other boxes of Split.
Media height
Every card shows its media at the same height, cropped to fill the box.
- Desktop media height (100 to 600 px) applies on screens 1024 px and wider.
- Preserve media height on mobile (on by default) sizes the media from the image proportions on phones and on tablets held upright, instead of a fixed height. All image cards of the section take the proportions of the last card's image, so use images with the same proportions in every card.
- Turn it off to use Mobile media height (100 to 500 px) instead, with the media cropped to that height.
- Don't show media removes the media area from every card. The cards then show only their blocks, on the card background color.
A card without an image shows a placeholder until you select one.
Text alignment and spacing
These settings apply to the blocks of every card in the section:
- Text alignment places the blocks on the left, in the center or on the right of the card.
- Text padding sets the space between the card edge and its blocks: Small, Regular or Large. On screens wider than 1024 px, Small is 40 px, Regular 80 px and Large 9 percent of the screen width.
- Text spacing sets the gap under each block: Small 7.5 px, Medium 15 px, Large 24 px, Extra large 30 px on screens wider than 480 px.
Building a card
Add a card
In the theme editor sidebar, select Add block under the Flex cards section and choose Card. A new card comes with a Caption and a Heading block.
Set its width
In the card, set Desktop columns so that the cards of the row add up to 12.
Add the media
Select an Image, or a Video file for a muted video that plays in a loop.
Add the blocks
Select Add block inside the card and choose theme blocks, such as Heading, Text and Button. Drag them to reorder them.
The card settings are on the Flex card page, and every block has its own page under Theme blocks.
Why are my cards not side by side?
Because the Desktop columns of the cards add up to more than 12, so the last card moves to a new row. Lower the columns of one card until the row adds up to 12. On screens narrower than 768 px the cards are always stacked.
How do I make a card clickable?
Add a Button block inside the card and set its Button link. The Card itself has no link setting. For cards that link as a whole, use the Flex grid section: its Media card and Text card have a Link.
All Flex cards settings
Every setting in this group, with its type and default.
Accepts these blocks: Card.
Flex cards section: Layout
Where to find it: Flex cards → Layout
Desktop media height (slider 100 to 600 px, step 10, default: 300 px): Sets the height of the media area of every card on screens 1024 px and wider; the image or video is cropped to fill it. Shown only when Don't show media is off.
Preserve media height on mobile (checkbox, default: on): Sizes the media area from the image proportions on phones and on tablets held upright, instead of a fixed height. All image cards of the section take the proportions of the last card's image. Shown only when Don't show media is off.
Mobile media height (slider 100 to 500 px, step 10, default: 200 px): Sets the height of the media area of every card below 1024 px; the image or video is cropped to fill it. Shown only when Don't show media is off and Preserve media height on mobile is off.
Text alignment (dropdown, default: Left): Places the blocks of every card on the left, in the center or on the right. Options: Left, Center, Right.
Don't show media (checkbox, default: off): Removes the image or video area from every card, so the cards show only their blocks on the card background.
Flex cards section: Typography
Where to find it: Flex cards → Typography
Text padding (dropdown, default: Small): Sets the padding around the blocks of every card. On screens wider than 1024 px: Small 40 px, Regular 80 px, Large 9 percent of the screen width. Options: Small, Regular, Large.
Text spacing (dropdown, default: Medium): Sets the gap under each block in the cards: 7.5, 15, 24 or 30 px on screens wider than 480 px, two thirds of that on smaller phones. Options: Small, Medium, Large, Extra large.
Related pages
- Flex card: the settings of each card in this section.
- Theme blocks: the blocks you can add inside a card.
- Flex grid section: cards that span columns and rows, with a link on the whole card.
- How Split is built: the box layout and breakpoints of Split.
Featured product
The Featured product section shows one product with its gallery, variants and buy buttons on any Split page, so customers can buy without opening it.
Flex grid
The Flex grid section builds a grid of media cards and text cards that span columns and rows in Split, behind three presets including a media collage.