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

<p>The recovery order has been registered.</p>
<hr class="lt-divider" />
<p>The appraisal follows within three days.</p>
<hr class="lt-divider" data-variant="strong" />
<p>Next of kin: not found.</p>
<hr class="lt-divider" data-variant="subtle" />
<p>Recovery reference LR-2079-0112.</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" }))

kotlinx.html

// Once for the whole app, in the page template: every stylesheet, from the WebJar.
head { link(rel = "stylesheet", href = LotekWebJar.CSS) }

On a Kotlin or Java server, the same with kotlinx.html and lo-tek-kotlinx-html. The builder functions are in Lt, with an enum for each list of values:

import kotlinx.html.*
import no.lotek.*
import no.lotek.html.lt

fun FlowContent.recovery() {
    p { +"The recovery order has been registered." }
    hr { lt(Lt.divider()) }
    p { +"The appraisal follows within three days." }
    hr { lt(Lt.divider(variant = DividerVariant.STRONG)) }
    p { +"Next of kin: not found." }
    hr { lt(Lt.divider(variant = DividerVariant.SUBTLE)) }
    p { +"Recovery reference LR-2079-0112." }
}

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.