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

Adding a Separator

To add a Separator to your page:
  1. Open the Insert Menu and navigate to Components.
  1. Click or drag the Separator onto your desired location on the page.

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:
  1. Add a Row component to your page.
  1. Within the Row, place two Separator components with a Text element between them.
  1. Select the Row and navigate to the Properties Panel.
  1. 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.
  1. Navigate to the Properties Panel.
  1. Change the orientation property to ‘vertical’.
  1. 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.

Powered by Notaku