The Separator is a visual element used to divide content into distinct sections.

Adding a Separator

You can add a Separator to your page by inserting it from the Library.

Guides

Adjusting Sizes

You can customize the dimensions of the Separator to fit your layout:

1. Select the Separator component.

2. Go to the Properties Panel.

3. Adjust the width and height to create a thin line or a more prominent divider.

Adding a Labeled Divider

For designs that require a label in the middle of a separator:

1. Add a Row component to your page.

2. Within the Row, place two Separator components with a Text element between them.

3. Select the Row and navigate to the Properties Panel.

4. Set align-items to center and add a gap value so the label sits nicely between the two lines.

Vertical

By default, the Separator is horizontal. If you need a vertical divider, follow these steps:

1. Select the Separator component and go to the Properties Panel.

2. Change the orientation property to ‘vertical’.

3. Set the width and height of the separator.

Properties

Separator