Container
A centred, max-width wrapper that groups child components. This is the most common structural element.Properties
Spacing and Margins
Spacing and Margins
| Property | Type | Description |
|---|---|---|
marginTop | select | Top margin utility |
marginBottom | select | Bottom margin utility |
paddingTop | select | Top padding utility |
paddingBottom | select | Bottom padding utility |
paddingStart | select | Left/start padding utility |
paddingEnd | select | Right/end padding utility |
Advanced
Advanced
| Property | Type | Description |
|---|---|---|
classNames | text | Additional CSS classes |
items — drop child components here. In the editor, the slot has a minimum height of 4 rem and display: block for easy targeting. At runtime, it uses display: contents to avoid extra wrapper elements.
Responsive Grid
A Bootstrap row/column grid where every column shares the same responsive width. Use this when all columns should be the same size.Properties
Columns
Columns
Each breakpoint controls how many equal-width columns appear:
For example, setting
| Property | Breakpoint | Range |
|---|---|---|
xsColumns | Extra Small (< 576 px) | 1–12 |
smColumns | Small (≥ 576 px) | 1–12 |
mdColumns | Medium (≥ 768 px) | 1–12 |
lgColumns | Large (≥ 992 px) | 1–12 |
xlColumns | Extra Large (≥ 1200 px) | 1–12 |
lgColumns to 3 and smColumns to 1 gives you a three-column layout on desktops that stacks to a single column on small screens.Layout
Layout
| Property | Type | Description |
|---|---|---|
fluid | radio | Full-width container (no max-width): No, Yes |
Spacing and Margins
Spacing and Margins
Standard margin and padding utilities.
Advanced
Advanced
| Property | Type | Description |
|---|---|---|
classNames | text | Additional CSS classes |
items — an array of columns, each with its own content slot. You must have at least 1 column. Add columns by clicking the + button in the items array.
Default
4 columns with empty content.Custom Grid
A Bootstrap row/column grid where each column has individual size controls per breakpoint. Use this when columns need different widths (e.g. an 8/4 sidebar layout).Properties
Column sizes (per item)
Column sizes (per item)
Each column in the
Setting a column to Auto (0) makes it auto-sized.
items array has its own size settings:| Property | Breakpoint | Options |
|---|---|---|
xs | Extra Small (< 576 px) | Auto, 1–12 |
sm | Small (≥ 576 px) | Auto, 1–12 |
md | Medium (≥ 768 px) | Auto, 1–12 |
lg | Large (≥ 992 px) | Auto, 1–12 |
xl | Extra Large (≥ 1200 px) | Auto, 1–12 |
Layout
Layout
| Property | Type | Description |
|---|---|---|
fluid | radio | Full-width container: No, Yes |
gutter | select | Gap between columns: Default, None, g-1 through g-5 |
Spacing and Margins
Spacing and Margins
Standard margin and padding utilities.
Advanced
Advanced
| Property | Type | Description |
|---|---|---|
classNames | text | Additional CSS classes |
items — an array of columns. Each column has a content slot and its own sizes group.
Default
Two columns: first at 8 cols (lg/xl), second at 4 cols (lg/xl) — a classic content-plus-sidebar layout.Stack
Arranges child components in a vertical or horizontal stack with configurable gap.Properties
| Property | Type | Default | Description |
|---|---|---|---|
gap | select | gap-4 | Space between items: Default, None, 1–9 |
direction | select | Vertical | Stack direction: Vertical, Horizontal |
items — drop components to stack them.
Div
A plain<div> wrapper with text alignment and spacing. Use it to group components or apply utility classes.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
textAlign | select | Default | Text alignment: Default, Start, Center, End |
classNames — additional CSS classes.
Slot: items — drop child components here.
Separator
A horizontal rule used to visually divide sections.| Property | Type | Default | Description |
|---|---|---|---|
size | select | 4 | Vertical margin: None, 1–9, Auto |
showBorder | radio | Yes | Show a visible horizontal line: No, Yes |
className | text | — | Additional CSS classes |
Layout tips
- Nest layouts freely — you can place a Responsive Grid inside a Container, or a Stack inside a Custom Grid column.
- Use Container for max-width — wrap content in a Container to keep it centred and bounded.
- Use Stack for quick lists — the vertical stack with a gap is often the fastest way to arrange components.
- Use Custom Grid for unequal columns — when one column needs to be wider (e.g. 8/4 for sidebar), Custom Grid gives you per-column control.
- Use Responsive Grid for equal columns — when all columns should be the same width, Responsive Grid is simpler to configure.