| description | Create visual separation between sections of a page |
|---|
The Divider component creates a simple line or coloured block between sections of your website. Use it to organise content, strengthen visual hierarchy, or add a decorative break.
{% embed url="https://www.youtube.com/watch?v=5iCfc3nRnx8" %}
You’ll find Divider under Utility in the Components list.
- Drag Divider between the sections you want to separate.
- Set its width and height.
- Choose a colour, gradient, or image background.
- Adjust spacing and borders to match the surrounding layout.
Width controls the divider’s horizontal size and defaults to Auto.
Height controls its thickness and defaults to theme spacing 0.5.
Style chooses the divider fill:
- Color — Uses a theme colour. This is the default.
- Image — Uses a resource image.
- Gradient — Blends two or three theme colours.
The controls shown below Style change to match the selected background type.
Use Spacing to add margin or padding around the divider. Borders can add a border style, width, colour, opacity, and radius.
Use a Divider for presentation rather than as the only indication that content has changed topic. Keep meaningful section headings in the page structure.
- Container — Groups a section and can apply backgrounds, borders, and spacing.
- Background — Creates larger decorative background areas with optional angled edges.
{% include "../../.gitbook/includes/common-controls.md" %}