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:
- Select the Separator component.
- Go to the Properties Panel.
- 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:
- Add a Row component to your page.
- Within the Row, place two Separator components with a Text element between them.
- Select the Row and navigate to the Properties Panel.
- 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:
- Select the Separator component and go to the Properties Panel.
- Change the
orientationproperty to‘vertical’.
- Set the width and height of the separator.
Properties
Separator
Property | Type | Default | Description |
orientation | ‘horizontal’ | ‘vertical’ | ‘horizontal’ | Determines whether the separator is displayed horizontally or vertically. |