Divider

The class goes on a plain <hr>. The browser’s own rule has both a border and a height, and both have to be reset before the colour from the tokens is the only one shown. It also has auto margins at the sides, which in a flex column make the line 0 pixels wide. The class resets them, so the line fills the width.

How to use it

Example

Plain HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.36.0/src/tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.36.0/src/components/css/divider/divider.css">
<!-- Or everything in one file: https://cdn.jsdelivr.net/npm/@lo-tek/interfaces@0.36.0/dist/lotek.css -->

<p>The case has been registered.</p>
<hr class="lt-divider" />
<p>You will get an answer within three weeks.</p>
<hr class="lt-divider" data-variant="strong" />
<p>Contact us if anything is unclear.</p>
<hr class="lt-divider" data-variant="subtle" />
<p>Case number 2026-0481.</p>

TypeScript

import "@lo-tek/interfaces/tokens.css"
import "@lo-tek/interfaces/divider.css"

lt is used in two ways, and which one depends on whether you create the element or find it.

If you create the markup, spread the attributes in. That is the way in React, Astro and anything else that renders:

import { lt } from "@lo-tek/interfaces/react"

<hr {...lt.divider({ variant: "subtle" })} />

The import is from /react here, since the block is JSX. From there the keys are className and htmlFor. In Astro and anything else without React, import @lo-tek/interfaces and you get class and for.

If you have the element in a variable, set them on it with setAttributes. That is the way without JSX, whether you just created the element or found it in a page the server sent:

import { lt } from "@lo-tek/interfaces"

const rule = document.createElement("hr")

lt.setAttributes(rule, lt.divider({ variant: "subtle" }))

data-variant	Used for
(omitted)	An ordinary break between two parts
strong	A clear break, for example before a summary
subtle	A faint break between rows in a list

When the line should not be read out

<hr> is announced as a break in the content. If the line is only decoration between two boxes that are already visually separate, say that it means nothing:

<hr class="lt-divider" data-variant="subtle" aria-hidden="true" />

If it separates two real parts of the page, it should stay in the accessibility tree. It is then the only way the screen reader learns that a topic has ended.

Classes you can style

Class	What it is
.lt-divider	The line. The strength comes from data-variant.

Variable	Default
--lt-divider-space	var(--lt-spacing-4)

--lt-divider-space is the space above and below the line. See Customising.

Accessibility

• Do not use a line where a heading belongs. A heading says what is coming; a line only says that something has ended.
• A line between every item in a list is noise to someone listening to the page. Use aria-hidden="true", or leave it out.