Layout blocks
Four blocks arrange other blocks. They're the scaffolding for any page that goes beyond a plain sequence of text.
| Block | Purpose |
|---|---|
| Horizontal layout | Arrange blocks side by side |
| Vertical layout | Arrange blocks stacked |
| Tab layout | Show sub-pages as tabs |
| Stepper layout | Show sub-pages as steps |
Work in structure mode
Once you nest layouts, it's hard to tell in the regular editor which block sits inside which. Show the Page structure panel via Show structure mode. → Creating a page
Horizontal and vertical layout
Both work the same way, just in different directions.
Arrangement
Under Arrangement, you set:
| Setting | Options |
|---|---|
| Direction | Side by side / Stacked |
| Alignment | Start, Center, End, Top, Bottom |
| Distribution | Space between, Stretch, Wrap content |
"Wrap content" for mobile devices
Without this setting, blocks placed side by side stay side by side even on narrow screens and get squeezed. With Wrap content, they drop below each other when there isn't enough room.
Check the result in the Portal preview under Smartphone.
Appearance
Also available: Background color, Border radius, Width, and Height.
Building cards
A vertical layout with a background color and border radius makes a card. Several of these in a horizontal layout make a row of cards — the standard basis for dashboards.
Tab layout
Displays sub-pages as tabs.
| Action | Label |
|---|---|
| Create a page | Add page |
| Remove a page | Delete selected page |
| Reorder | Move left / Move right |
| Color | Tab color |
Without sub-pages, it shows No pages with the note Add pages to see them as tabs.
If a tab contains incomplete required fields, the editor reports This tab contains validation errors.
What tabs are good for
For sections that are independent of each other and can be viewed in any order — "Overview," "Details," "Documents."
For a process with a defined order, use the Stepper layout instead.
Stepper layout
Displays sub-pages as a sequence of steps — for guided processes.
| Action | Label |
|---|---|
| Create a step | Add step |
| Remove a step | Delete selected step |
| Reorder | Move up / Move down |
Without steps: No steps with the note Add steps to see them in the stepper.
Visitors navigate with Back and Next.
Two settings
| Setting | Description in the interface |
|---|---|
| Linear | Previous steps must be completed first |
| Vertical | Show steps in vertical mode |
Linear is for processes, not for forms
Linear enforces the order — useful for applications, onboarding, and anything where a later step builds on an earlier one.
Without Linear, visitors can jump around. That's more comfortable when the steps are purely for organization.
Incomplete required fields report This step contains validation errors.
Which layout for what
| Goal | Layout |
|---|---|
| Metrics side by side | Horizontal layout with Wrap content |
| Card with border and color | Vertical layout with background color |
| Several independent sections | Tab layout |
| Guided process with a fixed order | Stepper layout, Linear |
| Structure without enforcement | Stepper layout without Linear |
| Long text page | no layouts, just headings |
Example: building a dashboard
Vertical layout
├── Heading 1 "Sales"
├── Horizontal layout (Wrap content enabled)
│ ├── Counter open inquiries
│ ├── Sum card order value
│ └── Donut chart by status
└── Grid View detail table