Horizonal and vertical divider

The Horizontal divider and Vertical divider components allow you to organize and structure the layout of your app.

• Use the Horizontal divider component to create a visual separation between sections stacked vertically on the window.
• Use the Vertical divider component to break up the window visually into columns, which is useful when you want to display content side-by-side.

Example

You can use the Horizontal and Vertical divider components to clearly delineate and create visual separation between sections, making the layout cleaner.

Note: The Horizontal and Vertical divider components follow the WCAG 2.0 AA accessibility guidelines.

Horizontal divider properties

The following Horizontal divider component properties are available:

Main

Property	Description	Required
Inset	Turn on to change the divider from full width to inset. Inset dividers have rounded edges and are indented from the sides.	No
Text	Enter a text for the divider. Only available when Inset is active.	No

Styles

Property	Description	Required
Size	Choose the amount of vertical space (margin) added above and below the divider line from the drop-down menu.	No

Interactions

Property	Description	Required
Hidden	Select the checkbox to hide the component in the end-user app. To hide it in the canvas, use the eye icon in the Layers panel.	No
Add rule	You can set rules to hide the component using Liquid. If no rules are set, the component will be hidden in all instances.	No

Note: See Add rules to trigger properties for more information on setting rules for these properties.

Vertical divider properties

The Vertical divider component can be only dropped inside Containers between columns. The following component properties are available:

Main

Property	Description	Required
Inset	Turn on to change the divider from full width to inset. Inset dividers have rounded edges and are indented from the sides.	No
Text	Enter a text for the divider. Only available when Inset is active.	No

Interactions

Property	Description	Required
Hidden	Select the checkbox to hide the component in the end-user app. To hide it in the canvas, use the eye icon in the Layers panel.	No
Add rule	You can set rules to hide the component using Liquid. If no rules are set, the component will be hidden in all instances.	No

Note: See Add rules to trigger properties for more information on setting rules for these properties.