Flex columns section
The Flex columns section of Combine shows columns of theme blocks as a grid or slider, for features, steps or logos.
Applies to: Combine 4.2.0 and later. Added in: Combine 4.0.0. Last checked: 2026-10-13 against Combine 4.2.0.
The Flex columns section shows columns of theme blocks side by side, as a slider or a grid. Use it for features, steps, team members or a list of logos, with any mix of headings, text, images and buttons in each column.
Where to find it: in the theme editor, select Add section and choose Flex columns. The section starts with four columns, each with a Heading and a Text block.
Layout
- Layout shows the columns as a Slider (the default) or a Grid. The slider scrolls sideways with arrows when there are more columns than fit; the grid wraps them into rows.
- Desktop layout sets how many columns show side by side on desktop: 2 columns, 3 columns, 4 columns (the default) or 5 columns. Combine reduces it on smaller screens:
| Desktop layout | Below 1024 px | Below 768 px |
|---|---|---|
| 2 columns | 2 | 1 |
| 3 columns | 3 | 2 |
| 4 columns | 3 | 2 |
| 5 columns | 4 | 2 |
- Mobile layout sets the columns on screens narrower than 475 px: 1 column (the default) or 2 columns.
Text style
- Text alignment aligns the blocks of every column: Left (the default), Center or Right.
- Text spacing sets the gap between the blocks of a column, from -12 to 60 px (default 12 px).
Custom card design
Border radius rounds the corners of the columns, 0 to 30 px. It shows only on columns with their own Background or Border color.
The section heading, background colors, margins and heading tag work as described in General section styling. In Flex columns the color under Section design is called Text color.
Column
Inside the section, select Add block and choose Column. Then select Add block inside the column to add a Heading, Text, Image, Button or any other theme block.
- Background and Border under Custom card design turn the column into a card, with padding inside and the section's Border radius. Leave both transparent for plain columns.
- Text sets the color of the column's blocks.
How do I make a list of logos with Flex columns?
Add one Column per logo with an Image block inside, set Desktop layout to 5 columns and Mobile layout to 2 columns, and use Layout Grid to show every logo at once. For a single row of logos in one place, a Content group block with Image blocks inside is lighter.
Why do my columns have no background or border?
Because the column colors are transparent by default. Set Background or Border on each Column. Only then does the column get a card shape, padding and the Border radius of the section.
All Flex columns settings
Every setting of this page, with its type and default.
Accepts these blocks: Column.
Flex columns section: Section heading
Where to find it: Flex columns → Section heading
The Flex columns section uses the standard Section heading settings, listed in General section styling.
Heading (text field): Sets the section title. Leave Heading, Subheading and Button label empty to hide the heading area.
Subheading (rich text): Sets a short text next to or under the heading, in smaller, lighter text.
Heading size (dropdown, default: Regular): Sets the size of the section heading, in the Section titles font of Theme settings → Typography. Options: Regular, Large.
Text alignment (dropdown, default: One row: Left): One row: Left puts the heading and subheading side by side with the button on the right; Two rows puts the subheading under the heading; Center centers everything. Options: One row: Left, Two rows: Left, Two rows: Center.
Button label (text field): Adds a button to the heading area on desktop; below 768 px it shows under the section as a full-width button.
Button link (link). Shown only when Button label is set.
These settings differ from the standard ones or exist only here:
Heading (text field): Sets the section title. Leave Heading, Subheading and Button label empty to hide the heading area.
Subheading (rich text): Sets a short text next to or under the heading, in smaller, lighter text.
Flex columns section: Layout
Where to find it: Flex columns → Layout
Layout (dropdown, default: Slider): Shows the columns as a slider that scrolls sideways, or as a grid that wraps into rows. Options: Slider, Grid.
Desktop layout (dropdown, default: 4 columns): Sets the columns on desktop. Below 1024 px 4 columns become 3 and 5 become 4; below 768 px every layout shows 2 columns, or 1 for 2 columns. Options: 2 columns, 3 columns, 4 columns, 5 columns.
Mobile layout (dropdown, default: 1 column): Sets the columns on screens narrower than 475 px. Options: 1 column, 2 columns.
Flex columns section: Text style
Where to find it: Flex columns → Text style
Text alignment (dropdown, default: Left): Aligns the blocks of every column. Options: Left, Center, Right.
Text spacing (slider -12 to 60 px, default: 12 px): Sets the gap between the blocks of each column.
Flex columns section: Custom card design
Where to find it: Flex columns → Custom card design
Border radius (slider 0 to 30 px, default: 0 px): Rounds the corners of the columns that have their own Background or Border color.
Flex columns section: Section design
Where to find it: Flex columns → Section design
The Flex columns section uses the standard Section design settings, listed in General section styling.
Background color (color, default: transparent): Fills the whole section, edge to edge. Leave it transparent to use the body background.
Background gradient (gradient): Fills the section with a gradient instead of the background color.
Text color (color, default: transparent): Sets the color of the section heading, the subheading and the slider arrows.
These settings differ from the standard ones or exist only here:
Text color (color, default: transparent): Sets the color of the section heading, the subheading and the slider arrows.
Flex columns section: Gutter
Where to find it: Flex columns → Gutter
The Flex columns section uses the standard Gutter settings, listed in General section styling.
Decrease top margin (checkbox, default: off): Makes the space above the section smaller: at most 70 px on desktop, 40 px on mobile.
Remove bottom margin (checkbox, default: off): Pulls the next section up, so the two sections touch.
Flex columns section: SEO
Where to find it: Flex columns → SEO
The Flex columns section uses the standard SEO settings, listed in General section styling.
Heading tag (dropdown, default: H2): Sets the HTML level of the section heading for search engines; span gives it no level. It does not change the size. Options: H1, H2, H3, H4, span.
Where to find it: Flex columns → Column.
Accepts these blocks: any theme block and app blocks.
Column block: Custom card design
Where to find it: Flex columns → Column → Custom card design
Background (color with transparency, default: transparent): Sets the column background and turns the column into a card with padding and the section's Border radius.
Text (color, default: transparent): Sets the color of the column's blocks.
Border (color, default: transparent): Draws a line around the column and turns it into a card with padding.
Related pages
- Flex sections: how flex sections, columns and theme blocks fit together.
- Theme blocks: the blocks you add inside a column.
- Text columns section: fixed columns of title, text and button.
- General section styling: the standard section settings.