Layout & Container Components User Guide
Category: Layout & Structure
Purpose: Layout containers provide structural scaffolding (multi-column grids, card wrappers, tabs, accordions, and carousels) that group and organize inner components.
Every row in the palette carries a ? button that opens that component's own help: overview, mental model, when to use it versus the alternatives, a complete property reference, worked recipes, accessibility and translation notes, gotchas, troubleshooting and an FAQ. It ships with the build, so it can never drift from the component you are configuring.
This guide is the map — which block to reach for and how they combine. The ? is the manual for each one.
A page's page type decides which blocks it is offered. If a component named here is missing from your palette, the page type is why — not a missing permission. See Visual Builder mode.
1. Multi-Column Container (columns_container)
Organize component blocks into multi-column responsive grid rows.
UI Controls & Options
| Field Label | Control Type | Input / Options | Purpose & Live Effect |
|---|---|---|---|
| Column Count | Dropdown Selector | • 1 Column • 2 Columns (50% / 50%) • 3 Columns (33% / 33% / 33%) • 4 Columns (25% each) | Dictates how many parallel columns are placed side-by-side on desktop. |
| Column Gap | Dropdown Selector | • Small (16px) • Medium (24px) • Large (32px) | Sets breathing room spacing between grid columns. |
| Vertical Alignment | Dropdown Selector | • Top • Middle • Bottom | Aligns content vertically when columns have unequal height. |
2. Card Section Component (card_section)
Wraps inner components inside a distinct bordered, shaded, or elevated container card.
UI Controls
| Field Label | Control Type | Options / Inputs | Purpose & Live Effect |
|---|---|---|---|
| Card Variant | Dropdown Selector | • Bordered (Thin outline border) • Elevated (Soft drop shadow) • Flat (Solid background fill) • Glassmorphism (Semi-transparent blurred card) | Sets visual styling of the card wrapper. |
| Padding | Dropdown Selector | • Small (12px) • Medium (24px) • Large (36px) | Sets inner breathing room padding inside card edges. |
| Border Radius | Dropdown Selector | • None (0px) • Rounded (8px) • Pill (24px) | Controls corner rounding of the container card. |
3. Tabs Container (tabs)
Organize dense content into tabbed panel views.
UI Controls
| Field Label | Control Type | Options / Inputs | Purpose & Live Effect |
|---|---|---|---|
| Tab List | Item List Manager | Array of tab items | Click + Add Tab to create tab panels (e.g. "Overview / Specifications / Reviews"). |
| Tab Style | Dropdown Selector | • Underline (Classic line indicator) • Pills (Solid background buttons) • Cards (Bordered tab buttons) | Controls visual appearance of tab header buttons. |
4. Accordion Container (accordion)
Organize information into collapsible vertical stacked panels.
UI Controls
| Field Label | Control Type | Options / Inputs | Purpose & Live Effect |
|---|---|---|---|
| Panel Items | Item List Manager | Array of accordion panels | Click + Add Panel to add collapsible sections. |
| Allow Multiple Open | Toggle Switch | On / Off | Allows visitors to open multiple panels simultaneously. |