Separator
Collaborate with us
Edit this page on GitHub
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.
-
Drag Separator pattern into the preview.
-
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
-
Drag a container into the preview.
-
Create a class called "separator-height".
css .separator-height { height: 100px; }1. Drag the Separator pattern into the container. -
Set the IsVertical parameter to True.
-
Publish and test.
