Divider

A divider is a simple line used to mark a separation between different parts of the UI. Use a plain <hr /> element — it comes with default styling from @volvo-cars/css.

Content above the divider.

---

Content below the divider.

<p>Content above the divider.</p>
<hr />
<p>Content below the divider.</p>

A classless <hr /> renders with 32px vertical margins, a 1px top border, and the --v-color-ornament-primary border color.

Custom styling

Adding any class to <hr> removes the default styles. Rebuild with utility classes: border-t for the line, my-* for spacing, and optional width or color classes.

Content above the divider.

---

Content below the divider.

<p>Content above the divider.</p>
<hr class="border-t my-48 w-sm mx-auto" />
<p>Content below the divider.</p>

Use w-sm mx-auto for a short centered divider, or border color utilities like border-primary or border-secondary to change the line color.

Vertical divider

Use border-l on a <div> with role="separator" and aria-orientation="vertical". The parent must have a defined height.

Left content

Right content

<div class="flex gap-16" style="height: 100px">
  <p>Left content</p>
  <div
    role="separator"
    aria-orientation="vertical"
    class="border-l h-full"
  ></div>
  <p>Right content</p>
</div>

Accessibility

• A plain <hr /> has an implicit separator role — no extra attributes needed
• For vertical dividers, add role="separator" and aria-orientation="vertical" since <div> has no semantic meaning
• Decorative dividers that don’t convey structure can use role="presentation" to hide them from assistive technology