---
title: Divider
summary: 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.
description: Separate content with horizontal dividers. Add optional text labels aligned left, center, or right to keep layouts clear.
source: core/scss/ui/_type.scss
classnames:
  component:
    - class: hr
      desc: Applied to the hr element
  part:
    - class: hr-text
      desc: Divider with a label; the text sits in a child element
  modifier:
    - class: hr-text-spaceless
      desc: Removes the vertical margin
  direction:
    - class: hr-text-start
      desc: Moves the label to the leading edge
    - class: hr-text-end
      desc: Moves the label to the trailing edge
  color:
    - class: text-{color}
      desc: Any base color for a labelled divider
---
import Example from '@components/Example.astro';

## Default markup

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

<Example>
<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>
</Example>

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

<Example>
<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>
</Example>

## Divider color

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

<Example>
<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>
</Example>

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