The Smart separator block draws a line between two blocks, horizontal or vertical depending on the layout around it. This page describes its orientation, color, thickness and the style of the site’s separators.
Add a separator
- In the editor, open the inserter and choose Smart separator, or search for
lineorrule. Add a block describes the ways to insert a block. - Place it between the two blocks to separate.
As soon as it is inserted, the separator has the Separator style: a one-pixel line. Its light tint follows the text color in both light and dark mode.
The orientation of the line
The separator has no orientation setting: it follows from the layout around it.
| Placed in | Resulting line |
|---|---|
| A container where blocks stack | A horizontal line across the full width, one pixel high. |
| A horizontal Flex container | A vertical line one pixel wide, as tall as the row, as long as Align items is not set on the container. |
For a thicker or shorter line, set its height or width in the Size & Spacing panel.
Styles tab
The separator can be set in the Default and Active states. It has no Settings tab.
| Panel | Purpose |
|---|---|
| Colors | The background color and its opacity, which make up the color of the line. The separator has no text color. See Color a block. |
| Size & Spacing | The thickness, length and margins of the line, see Set size, borders and effects. |
| Borders, Effects | Set size, borders and effects |
The Separators part of the design catalog gives all the separators of the site a look: Thin, Thick, Dotted, Faded or Colored (Adopt a design from the catalog).
Animations tab
The Animations tab makes the line appear, for example when it comes into view. Animate a block describes the effects.
On a phone
The Size & Spacing panel is set screen by screen. A vertical line between two columns becomes horizontal when the row switches to Vertical orientation on phones.
Accessibility
The separator is a decorative line: screen readers do not announce it. To mark the start of a new part, place a Heading, visible or hidden.
Limits
- The separator contains nothing: no text or icon in the middle of the line.
- It has no Hover state.
- A line pasted from a web page becomes a separator with the site’s style: the thickness and color of the other site do not carry over.