Divider

A horizontal or vertical line used to separate content sections.

@volvo-cars/css v3.1.0

Custom horizontal divider

Content above the divider.

Content below the divider.

Show codeHide code

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

Vertical divider

Left content

Right content

Show codeHide code

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