A small visual cue can be enough to make a page feel more organised. Divider places a visible break between two related content sections without forcing you to create a new chapter or full section.
You choose two things: what the divider looks like and how wide it runs. Five styles range from a quiet hairline to a more decorative treatment.
Hairline — narrow: the quietest option. Use it when the sections still belong closely together and only need a subtle visual pause.
Thick — wide: signals a stronger shift in rhythm or topic. Useful when the next section has a different emphasis but does not need its own heading.
Gradient — full: visible in the centre and fading softly towards the edges. A good choice for a gentle transition after a stronger visual section.
Dotted — wide: a slightly more playful, less formal option. It can suit lighter content or a visual system that already has a relaxed character.
Ornament ◆ — narrow: adds a small diamond between two fine lines. It has a more editorial, magazine-like feel, so use it sparingly.
Do not put a divider between every block. Too many visible breaks make the page feel fragmented. Use one when there is a real shift in rhythm or topic. If you only need more breathing room, choose a Spacer instead.
Style and width together determine how quiet or prominent the break feels.
A fine 1-pixel line. The most neutral choice between closely related sections.
A stronger 3-pixel line for a more noticeable change of section or rhythm.
A more decorative, lighter line with a less formal feel.
A small diamond between two hairlines. The diamond uses the website accent colour.
A soft line that is strongest in the centre and fades towards the edges.
Choose from four line widths. Full means the maximum width of the content band, not necessarily the entire screen.
Not every pause needs a visible line.
A SUBTLE CHANGE OF RHYTHM
Use only as strong a visual mark as the content shift needs — and when space alone is enough, do not draw a line.