Components · Menus, lists and dividers

Divider

A divider is a 1px line that separates content groups, so users can scan and organize information. It is decorative and never interactive.

How to add a divider to a page. The file is components/css/divider.css.

Basic Usage

Link the shared stylesheet once per page. Never copy the rules into a page.

Step	What to do
1. Link	`<link rel="stylesheet" href="/components/css/divider.css">`. Both templates already have it.
2. Horizontal	An `<hr class="divider">` between the two groups.
3. Vertical	A `span.divider.divider--vertical` with `role="separator"` inside a flex row.
4. Color	Primary is the default. Add `divider--secondary` or `divider--tertiary`.
5. Space	Set it with the `gap` of the parent, never with margin on the divider.

Divider

Copy the markup you need.

API

Classes

Class	Use
`divider`	The line: 1px, Primary color, full width.
`divider--secondary`	Secondary border color.
`divider--tertiary`	Tertiary border color.
`divider--vertical`	A vertical line inside a flex row.

Things to know

A divider is the same on every breakpoint.
The divider sets margin: 0. Put the space on the parent with gap.
A boundary between full-width page sections is .page-divider (eco-section), not a divider.

CSS / Tailwind

The component is one CSS file, shared by every page. Link it, never copy it. The CSS below is read from the file the page links, so it is always what you see.

CSS (components/css/divider.css)