Sections and Containers

Add the section or container in Layout & Controls

Open Layout & Controls and choose a section or container from the control gallery across the top of the workspace. You can also press Ctrl+Space to open Quick Add, choose the control, and bind it before placing it on the canvas.

Select the control on the canvas, then configure Setup, Appearance, and Behavior in the Properties panel on the right.

Sections

A section is a row in the user interface – all components must be placed within a section. Sections can be subdivided to break up the screen. Each segment of the section contains a built-in container, into which subsequent controls can be placed.

The Layout property defines the segmentation of a row. There are six templates for segmenting a section, as seen below.

Use Setup in the section's Properties panel to choose its column layout, as shown in the screenshot. Open Appearance to configure section styling. You can further customize the corresponding styles with CSS in the Stylesheets module.

Containers

A container is a subsection that can help subdivide a section into multiple vertical segments.

Select the container and open Appearance. Under Surface, choose a style card such as Plain, Panel, Inset, or Card. Additional choices include Elevated card, Gradient card, Outlined card, Hero, Result, and Dark result. Older inset styles are grouped under Legacy insets.

For a Panel container, configure the header and footer text to label those areas. Use Color to choose a color scheme, or keep Theme default to use the application's theme. You can customize the corresponding styles with CSS in the Stylesheets module.

See Containers for more about surface styles, tabs, and subdivisions.