Contents

Divider

A horizontal line marking where one part of the page ends and the next begins.

Where to find it
On the composer’s palette, labelled Divider. Drag it onto the canvas to add one.
Its settings
2 of them, in the “Selected Component” section of the Modify drawer.
Provided by
RuleCMS, in @rulecms/source-components-react. Available to every team.

In plain English

The Divider component draws a line across the column it sits in. It is the thing you reach for between two sections of a long page — where the story ends and the pricing starts, above a footer, between the questions in an FAQ.

It is a real horizontal rule as far as the browser is concerned, which matters more than it sounds. A screen reader announces the break rather than skipping silently from one section into the next, and the page keeps that structure when it is read by anything other than an eye. Drawing a thin coloured box would look identical and say nothing.

There are two settings on the divider itself: whether the line is solid, dashed, or dotted, and how thick it is. Everything else about it is a column setting, and deliberately so. The line is drawn in the surrounding text colour, so Text Color sets it. The line is as wide as its column, so Width shortens it — and a shortened divider centres itself, which is what makes a short accent rule under a heading a two-click job.

It carries no space of its own. That is on purpose: spacing on a page comes from the row's Gap and the column's Margin, in the same place it comes from for everything else, rather than from a component having private opinions about the room it needs.

When you would use it

  • Between two sections of a long page that would otherwise run together.
  • Above a footer, or under a header, to close off the band.
  • Between repeated items — FAQ entries, a list of team members, a changelog.
  • As a short accent rule beneath a heading: raise Thickness, set a colour, and shorten it with Width.

Its settings

These are the settings this component offers, in the order the Modify drawer lists them. Each has its own page.

SettingLabel in the drawerWhat it does
Line StyleLine StyleWhether the divider is drawn as one unbroken line or a broken one.
ThicknessThicknessHow heavy the divider's line is, from a hairline to a band.

Watch out for

  • A divider with no space around it sits flush against the content on either side. Give it room with Margin on the column, or with Gap on the row.
  • Colour is not a divider setting. The line takes the surrounding text colour, so change it under "Selected Column" and then Text Color.
  • Setting Border on the column replaces the divider's line and applies to all four sides, which turns the rule into a box. Use Line Style and Thickness instead.
  • Dashed and dotted lines are nearly invisible at 1px. Raise Thickness when you use them.
  • Reach for a divider only when whitespace is not enough. A page separated entirely by rules reads as a form.

Where to go next