# Divider

> A line between parts of the content. A CSS component with one class and no JavaScript.

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

**Plain HTML**

```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 -->
```

```html
<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**

```ts
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:

```tsx
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:

```ts
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:

```html
<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](/customising.md).

## 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.