# Divider

> A divider is a horizontal line between blocks of content, with an optional text label on the left, in the center or on the right.

Separate content with horizontal dividers. Add optional text labels aligned left, center, or right to keep layouts clear.

Source: https://docs.tabler.io/ui/components/divider

---

## Default markup

The `.hr-text` element draws a line with a label in the middle. For a line without text, use a plain `hr`.

```html
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.</p>
<div class="hr-text">See also</div>
<p>Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!</p>
```

## Text position

Add `.hr-text-start` or `.hr-text-end` to move the label to the start or the end of the line. Without them it's centered.

```html
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.</p>
<div class="hr-text hr-text-start">Start divider</div>
<p>Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!</p>
<div class="hr-text">Centered divider</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.</p>
<div class="hr-text hr-text-end">End divider</div>
<p>Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!</p>
```

## Divider color

A `text-*` class from the [color palette](/ui/base/colors) colors the divider.

```html
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.</p>
<div class="hr-text text-green">Green divider</div>
<p>Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!</p>
<div class="hr-text text-red">Red divider</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.</p>
<div class="hr-text text-primary">Primary divider</div>
<p>Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!</p>
```

## Accessibility

- A divider that separates sections is decoration, so `hr` with no extra markup is enough - browsers already expose it as a separator.
- When the divider carries a label, keep the label as text. Do not fake it with a `::before`, since generated content is not reliably read.
- A vertical divider between inline items is decoration too. Use `aria-hidden="true"` if you build it from a `span` rather than an `hr`.
- Do not use a divider to group form fields. Use a `fieldset` with a `legend`, which is what actually creates the group.