View on GitHub

Divider

Use the horizontal or vertical rule helpers to create dividers. A divider can be used to visually structure an interface by clearly separating content sections.

On this page

You can find here the OUDS Divider design guidelines.

Horizontal rules

Horizontal rules should use the <hr /> tag, when the separator has semantic meaning (i.e., when it represents a topic change or a significant transition in the content). If the divider is purely decorative, prefer using a border CSS property on an HTML element or our border utilities, or even ensure to hide it from assistive technologies (e.g., aria-hidden="true").

<hr />
<div class="border-top border-default my-md"></div>
html

Vertical rules

Vertical rules are inspired by the <hr /> element. The vr class allows you to create vertical dividers in common layouts. They’re styled just like <hr /> elements. They have min-height of 1em.

<div class="vr"></div>
html

Vertical rules scale their height in flex layouts:

<div class="d-flex" style="height: 50px;">
<div class="vr"></div>
</div>
<div class="d-flex" style="height: 80px;">
<div class="vr"></div>
</div>
<div class="d-flex" style="height: 100px;">
<div class="vr"></div>
</div>
html

Color

Change the divider color using the border color utilities.

<hr class="border-muted">
<hr class="border-emphasized">
<hr class="border-brand-primary">
<div data-bs-theme="light" class="bg-brand-primary py-2xs"><hr class="border-on-brand-primary"></div>
<div data-bs-theme="light" class="bg-always-white py-2xs"><hr class="border-always-black"></div>
<div data-bs-theme="dark" class="bg-always-black py-2xs"><hr class="border-always-white"></div>
<div data-bs-theme="dark" class="bg-always-black py-2xs"><hr class="border-always-on-black"></div>
<div data-bs-theme="light" class="bg-always-white py-2xs"><hr class="border-always-on-white"></div>
html 
<div class="vr border-muted"></div>
<div class="vr border-emphasized"></div>
<div class="vr border-brand-primary"></div>
<div data-bs-theme="light" class="d-flex bg-brand-primary"><div class="vr border-on-brand-primary"></div></div>
<div data-bs-theme="light" class="d-flex bg-always-white px-2xs"><div class="vr border-always-black"></div></div>
<div data-bs-theme="dark" class="d-flex bg-always-black px-2xs"><div class="vr border-always-white"></div></div>
<div data-bs-theme="dark" class="d-flex bg-always-black px-2xs"><div class="vr border-always-on-black"></div></div>
<div data-bs-theme="light" class="d-flex bg-always-white px-2xs"><div class="vr border-always-on-white"></div></div>
html
Bootstrap $enable-bootstrap-compatibility: true

The <hr /> and vr color can be set using colors utilities

<hr class="text-muted">
<div class="vr text-brand-primary"></div>
html

Size

Change the divider thickness using the border width utilities.

<div>
  <hr class="border-thin">
  <hr class="border-medium">
  <hr class="border-thick">
  <hr class="border-thicker">
</div>
html 
<div class="d-flex" style="height: 50px;">
  <div class="vr border-thin"></div>
  <div class="vr border-medium"></div>
  <div class="vr border-thick"></div>
  <div class="vr border-thicker"></div>
</div>
html