Divider

The Divider element provides a simple, standalone shorthand for horizontal and vertical separators. It draws the same line as the border utilities at level 6, the line the steps 60 and 65 draw.

#

Usage

Use divider or divider--h for horizontal dividers, and divider--v for vertical dividers.

The background variants (divider--on-white, divider--on-light, divider--on-dark, divider--on-black) are deprecated and will be removed in Framework 4.0. Pick an explicit border level or token instead.

#

Border Shorthand

Use it when you want a one-pixel horizontal or vertical separator without writing a full border utility class.

Horizontal Divider
Equivalent intent: border--h-6
Left
Right
TRMNL Logo Divider Border Shorthand 
<!-- Horizontal shorthand (same rendering intent as border--h-6) -->
<div class="divider"></div>

<!-- Explicit horizontal class -->
<div class="divider--h"></div>

<!-- Vertical shorthand -->
<div class="divider--v"></div>
#

Vertical Dividers

Vertical dividers draw the same way as horizontal ones.

Left Side White background
Right Side Same divider
Left Side Black background
Right Side Same divider
TRMNL Logo Vertical Dividers 
<!-- Vertical divider -->
<div class="divider--v"></div>
#

Common Usage Patterns

$1,234 Revenue
42 Orders
$29.38 AOV
TRMNL Logo Section Separation 
<!-- Replacing common border--h-x w--full pattern -->
<!-- Old way: -->
<div class="border--h-6 w--full"></div>

<!-- New way: -->
<div class="divider"></div>
#

Dividers in JavaScript

JavaScript can read the divider line too: TRMNLPaint.divider({ dir }) returns the level-6 line with the device and the active theme already applied. applyBorder() paints the returned BorderFill onto a node. Unlike the .border--* utilities, a divider paints on the element itself, so that is where the paint is read; see Painting Borders .