Divider

What is a divider?

The Divider component used to create a visual separation between sections of a page. It can be used in your app pages to break up content into clearly defined areas.

Dividers improve visual hierarchy, making complex layouts easier to scan and understand. They're especially useful when grouping related elements or separating distinct sections like headers, footers, sidebars, or different content blocks.

How to use it?

Drag and drop the Divider component onto your page and place it between containers or components in your page. You can rearrange the components how you like using the Component tree.

General properties

Orientation: Choose between Horizontal or Vertical from the General tab. The divider will adjust automatically based on your selection.
Label: Optionally, add a meaningful label to provide context. You can type text directly into the field or insert a global or local variable by clicking the + icon.

Visibility

In the Visibility tab, you can set a default visibility and add visibility rules for the divider, if you wish to show or hide it under certain conditions.

Style properties

Under Style properties, you can  choose from a variety of formatting options for both the divider and its label. You will be able to adjust the sizing, modify the padding and margin, and set the border size, color, and radius. For the label, set the font size, color, background color, and customize the text style.