Skip to main content




Applies only to Traditional Web Apps




Separate content clearly to help visual organization.

Use the Separator to distribute content into clear groups and ease visual organization.

How to use

To use the vertical separator, the parent element needs to have a defined height.

  1. Drag Separator pattern into the preview.

  2. Publish and test.

Input Parameters

Input Name Description Type Mandatory Default Value
Color Set the color. Color Identifier False Entities.Color.Neutral4
Space Set the space around the Separator line. Space Identifier False Entities.Space.Base
IsVertical If set as true, then the Separator becomes vertical. Boolean False False
ExtendedClass Add custom style classes to this Block. Text False none

Layout and Classes

CSS Selectors

Element CSS Class Description
.separator .separator-horizontal When IsVertical parameter is False
.separator .separator-vertical When IsVertical parameter is True

Advanced Use Case

Use the vertical separator

  1. Drag a container into the preview.

  2. Create a class called "separator-height".

    css .separator-height { height: 100px; } 1. Drag the Separator pattern into the container.

  3. Set the IsVertical parameter to True.

  4. Publish and test.

  • Was this article helpful?