Skip to content

Divider

A Divider is a visual element used to separate groups of content. It helps create structure, improve readability, and guide the user’s eye through sections of a layout.

<div class="tng-divider"></div>

Fill Variants

The divider supports different fill colors. The primary and ev variants have a thicker stroke (2px) and a width of 40px.

<div class="tng-divider"></div>
<div class="tng-divider is-primary"></div>
<div class="tng-divider is-ev"></div>

Default
Contrast

Container Pattern

Use .tng-has-dividers on a container to add border dividers between child elements.

<ol
  class="tng-stack align-items-stretch gap-none | tng-has-dividers"
  role="list"
>
  <li class="p-md">First item</li>
  <li class="p-md">Second item</li>
  <li class="p-md">Third item</li>
</ol>

First item
Second item
Third item

Orientation

Use .is-inline for vertical dividers. The divider will stretch to fill the available height.

<div class="tng-divider is-inline"></div>
<div class="tng-divider is-inline is-primary"></div>
<div class="tng-divider is-inline is-ev"></div>

Recipes

Divider under heading

<header class="tng-stack">
  <h2 class="mbe-4xl | tng-text-title is-5">Title Heading</h2>
  <div class="tng-divider is-primary"></div>
</header>

Title Heading

<nav class="tng-group gap-2xl">
  <a href="#" class="tng-link">Home</a>
  <a href="#" class="tng-link">Products</a>
  <div class="tng-divider is-inline" role="separator"></div>
  <a href="#" class="tng-link">Account</a>
  <a href="#" class="tng-link">Sign out</a>
</nav>

Accessibility

Use <hr> for horizontal dividers that represent a thematic break or section separation
Use role="separator" on decorative dividers, especially vertical ones