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

Component design version:

  • Divider v1.0.0

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