CSS

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>

Variants

The divider supports different fill colors: default (muted), emphasis (a high-contrast color at the same 1px weight), primary (has a thicker stroke (2px)), and on-contrast. When no variant is set, the divider renders with the default muted color. .is-emphasis follows the scheme like the default does, and also works on .tng-has-dividers and a .tng-content <hr>. Emphasis and primary are exclusive — pick one; combined, .is-primary wins.

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

<div class="tng-divider on-contrast"></div>
<div class="tng-divider is-emphasis on-contrast"></div>

Container Pattern

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

<ul class="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>
</ul>

• First item
• Second item
• Third item

Add .has-edge to also draw dividers on the container’s leading and trailing edges.

<ol class="tng-has-dividers has-edge" role="list">
  <li class="p-md">First item</li>
  <li class="p-md">Second item</li>
  <li class="p-md">Third item</li>
</ol>

1. First item
2. Second item
3. Third item

To draw only one edge, use .has-edge-start for the leading edge or .has-edge-end for the trailing edge. .has-edge is equivalent to applying both.

<ol class="tng-has-dividers has-edge-start" role="list">
  <li class="p-md">First item</li>
  <li class="p-md">Second item</li>
  <li class="p-md">Third item</li>
</ol>

1. First item
2. Second item
3. Third item

<ol class="tng-has-dividers has-edge-end" role="list">
  <li class="p-md">First item</li>
  <li class="p-md">Second item</li>
  <li class="p-md">Third item</li>
</ol>

1. First item
2. Second item
3. 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-emphasis"></div>
<div class="tng-divider is-inline is-primary"></div>

Modules

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" style="inline-size: 40px"></div>
</header>

Title Heading

Vertical divider in nav menu

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

Home Products

Account Sign out