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-brand-primary" />
<hr class="border-brand-secondary" />
<hr class="border-brand-tertiary" />
<hr class="border-default" />
<hr class="border-emphasized" />
<hr class="border-muted" />
<div class="bg-brand-primary py-2xs"><hr class="border-on-brand-primary"></div>
<div class="bg-brand-secondary py-2xs"><hr class="border-on-brand-secondary"></div>
<div class="bg-brand-tertiary py-2xs"><hr class="border-on-brand-tertiary"></div>
<div class="bg-always-white py-2xs"><hr class="border-always-black"></div>
<div class="bg-always-black py-2xs"><hr class="border-always-white"></div>
<div class="bg-always-black py-2xs"><hr class="border-always-on-black"></div>
<div class="bg-always-white py-2xs"><hr class="border-always-on-white"></div>
html 
<div class="vr border-brand-primary"></div>
<div class="vr border-brand-secondary"></div>
<div class="vr border-brand-tertiary"></div>
<div class="vr border-default"></div>
<div class="vr border-emphasized"></div>
<div class="vr border-muted"></div>
<div class="bg-brand-primary py-2xs"><div class="vr border-on-brand-primary"></div></div>
<div class="bg-brand-secondary py-2xs"><div class="vr border-on-brand-secondary"></div></div>
<div class="bg-brand-tertiary py-2xs"><div class="vr border-on-brand-tertiary"></div></div>
<div class="bg-always-white py-2xs"><div class="vr border-always-black"></div></div>
<div class="bg-always-black py-2xs"><div class="vr border-always-white"></div></div>
<div class="bg-always-black py-2xs"><div class="vr border-always-on-black"></div></div>
<div class="bg-always-white py-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