Dividers
How to add and style dividers.
The divider part is more versatile than you might think!
What Is A Divider?
A divider is a design element used to separate content on a page, often to create a visual distinction between different sections or to provide structure and hierarchy to the layout.
Location in the Parts Library: Base Parts > Layout > Divider
Dividers can be horizontal or vertical. They can also be broken up in the middle by a small piece of text, an icon, an avatar, or even a small image.
Adding a Divider
Choose the divider most closely aligned with what you need from the Parts Library.
Choose your preferred divider, select the part where you’d like to add your divider, and click ‘+ add to page’.
Editing and Formatting the Divider
Like many other parts, spacing can be applied using the property editor on the right, once the divider has been selected.
Divider parts don't have foreground and background colors like other parts, they only have one color that can be applied. If your divider has other parts within it (such as text or icons), those parts can have colors applied to them, how you would normally format those parts.
Changing the Orientation
To switch the orientation of a divider, say from horizontal to vertical, select the divider to activate the property editor on the right.
Then, select Orientation, and choose either horizontal or vertical. The orientation of the divider can be changed based on device size. For example, you may want a vertical divider on mobile and a horizontal divider on a larger device, or vice versa.
If you have a horizontal divider and change the orientation to vertical, you'll need to set the height of the divider using the size property. Again, you can select the dimensions based on the device size.
In the video below, a horizontal divider has been made vertical for small devices with the height set. On a medium device, we've made the divider horizontal again. The divider is then previewed across the device sizes to ensure it's doing the right thing. Click the play button to view.
Adjusting the Thickness
To adjust the thickness of the divider, select the divider. Then in the property editing panel, select 'Thickness', and adjust the thickness using the slider.
Adding Parts to Your Divider
In the Parts Library, there are examples of dividers that have text, icons, avatars, and images within the Divider part.
The easiest way to edit a divider with those parts is to add the divider closest to what you're looking for, and then amend the icons, avatars, texts, or images. However, you can also build them up yourself from a base divider.
The process is the same for all. Let's start with adding an icon to your divider.
Adding An Icon to Your Divider
Select the divider
Click "+" and find icons within the part library
Choose an icon
Amend the icon to your preferred icon
Amend any size or color as needed
In the example above, one icon was added. You can add more icons and they'll be placed next to each other.
Adding Another Part to Your Divider
Select the divider
Choose the avatar, image, or text
Amend the avatar, image, or text to your own
Amend any sizing and color as needed
In the example below, a divider has text added, an image added, and an avatar added.
Adjusting the Side where Divider Parts are Shown
If your divider has parts in it, such as an icon, avatar, image, or text, you can change the side that those parts are shown using the 'Side' property in the property editing panel. The default position of those parts is in the middle of the divider. They can also be placed at the start or the end.
Related Information
Last updated
Was this helpful?