📖 Overview
The Group and Column blocks work together to create flexible, responsive layouts. The Group block provides a 12-column CSS grid container (6 columns on mobile), while Column blocks define the width and behaviour of content areas within that grid. Columns support responsive widths, custom ordering, and alignment options.
Group Block
📖 Overview
The Group block is the primary layout container. It creates a responsive CSS grid and supports background images or videos. Column blocks should be placed inside a Group to take advantage of the grid system.
✏️ Content Options
Layout Tab
Row Gap
Set vertical spacing between rows. Tablet and mobile inherit from the previous breakpoint if left empty.
| Field |
Type |
Default |
Description |
| Desktop Row Gap |
Select |
M |
Vertical spacing between rows on desktop |
| Tablet Row Gap |
Select |
Inherit |
Vertical spacing on tablet. Leave empty to inherit desktop |
| Mobile Row Gap |
Select |
Inherit |
Vertical spacing on mobile. Leave empty to inherit tablet/desktop |
Alignment
Set vertical alignment of items within the grid.
| Field |
Type |
Description |
| Desktop Alignment |
Select |
Options: Start, Center, End, Stretch, Baseline |
| Tablet Alignment |
Select |
Leave empty to inherit desktop |
| Mobile Alignment |
Select |
Leave empty to inherit tablet/desktop |
Size Tab
| Field |
Type |
Default |
Description |
| Container Width |
Select |
Default |
Maximum width of the group container: Default, Narrow, Wide, or Full |
| Full Viewport Height |
Toggle |
Off |
Set minimum height to 100vh (full viewport height) |
Background Tab
| Field |
Type |
Default |
Description |
| Background Type |
Select |
None |
Choose None, Image, or Video |
| Background Image |
Image |
– |
Image that covers the entire group (only when type is Image) |
| Background Video |
File |
– |
Video that autoplays, loops, and is muted (only when type is Video) |
🎨 CSS Variables
| Variable |
Default Value |
--block-group-col-gap |
var(--spacing-xs) (mobile), var(--spacing-s) (desktop) |
Column Block
📖 Overview
The Column block defines a content area within a Group’s grid. It supports responsive widths (including custom percentages), inner block spacing, horizontal alignment, ordering, sticky behaviour, and self-alignment.
✏️ Content Options
Width
Configure column width for different screen sizes. Values cascade down: tablet inherits desktop, mobile inherits tablet.
| Field |
Type |
Default |
Description |
| Desktop Width |
Select |
50% |
Options: 25%, 33%, 40%, 50%, 60%, 66%, 75%, 100% |
| Tablet Width |
Select |
Inherit |
Leave empty to inherit desktop |
| Mobile Width |
Select |
100% |
Options: 33%, 50%, 66%, 100% |
| Use Custom Width? |
Toggle |
Off |
Enable to enter a custom percentage width (available for each breakpoint) |
| Custom Width (%) |
Number |
– |
Enter a value between 1-100 for precise control |
Inner Blocks
Configure spacing and alignment of blocks within the column.
| Field |
Type |
Default |
Description |
| Desktop Gap |
Select |
M |
Spacing between inner blocks on desktop |
| Tablet Gap |
Select |
Inherit |
Leave empty to use desktop value |
| Mobile Gap |
Select |
Inherit |
Leave empty to use tablet/desktop value |
| Desktop Alignment |
Select |
Left |
Horizontal alignment of inner blocks: Left, Center, Right. Empty by default, which acts as stretch. |
| Tablet Alignment |
Select |
Inherit |
Leave empty to use desktop value |
| Mobile Alignment |
Select |
Inherit |
Leave empty to use tablet/desktop value |
Settings
| Field |
Type |
Default |
Description |
| Enable Sticky Behavior? |
Toggle |
Off |
Make the column sticky on scroll. Requires Group alignment set to “Start” |
| Auto Top Margin? |
Toggle |
Off |
Apply automatic top margin to push this column to the bottom of its container. Only usable on Columns in Columns. Makes parent Column 100% height. |
| Self Alignment |
Select |
– |
Vertical alignment of this column: Start, Center, End, Stretch |
| Desktop Order |
Number |
– |
CSS order property for visual ordering (lower numbers appear first) |
| Tablet Order |
Number |
– |
Order on tablet screens |
| Mobile Order |
Number |
– |
Order on mobile screens |
🎨 CSS Variables
| Variable |
Default Value |
--block-column-sticky-top |
calc(var(--header-height) + var(--spacing-m)) |
