Layout components are structural building blocks that control how other components are arranged on the page. They do not display content themselves — instead they provide containers, rows, columns and spacing that you fill with other components. All layout components are found in the Layout category of the Blocks panel.Documentation Index
Fetch the complete documentation index at: https://learn.nexudus.com/llms.txt
Use this file to discover all available pages before exploring further.
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.