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