Divider

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.

How to Use Divider

You’ll find Divider under Utility in the Components list.

1. Drag Divider between the sections you want to separate.
2. Set its width and height.
3. Choose a colour, gradient, or image background.
4. Adjust spacing and borders to match the surrounding layout.

Component Settings

Sizing

Width controls the divider’s horizontal size and defaults to Auto.

Height controls its thickness and defaults to theme spacing 0.5.

Background

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.

Spacing and Borders

Use Spacing to add margin or padding around the divider. Borders can add a border style, width, colour, opacity, and radius.

Accessibility

Use a Divider for presentation rather than as the only indication that content has changed topic. Keep meaningful section headings in the page structure.

Related Components

• Container — Groups a section and can apply backgrounds, borders, and spacing.
• Background — Creates larger decorative background areas with optional angled edges.

Common Control	Description
Link	Link to a page, resource, anchor, email address, or website.
Layout	Control positioning, stacking, visibility, overflow, and isolation.
Sizing	Set width, height, and responsive size constraints.
Spacing	Add responsive margin and padding.
Typography & Text Styles	Control fonts, text spacing, decoration, colour, and semantic wrappers.
Backgrounds	Apply colour, image, gradient, SVG, video, and hover backgrounds.
Transitions	Choose what animates and set its timing curve, duration, and delay.
Effects	Apply shadows, opacity, and hover effects.
Filters	Apply blur, brightness, saturation, shadow, and backdrop effects.
Transforms	Scale, rotate, move, and skew components.
Borders	Set border style, colour, opacity, width, radius, and hover states.
Advanced	Add CSS classes and IDs, or change supported HTML tags.