Divider

The Divider element provides a simple, standalone shorthand for horizontal and vertical separators. It uses the same border-level rendering pipeline as the Border utility and defaults to level 6.

#

Usage

Use divider or divider--h for horizontal dividers, and divider--v for vertical dividers. Divider uses the same rendering pipeline as border utilities and defaults to border level 6.

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

Divider is a convenience alias for the common separator pattern. 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 use the same border-level pipeline as horizontal dividers.

Left Side White background
Right Side Auto-detected
Left Side Black background
Right Side Auto-detected
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

The divider rail is readable from JS via TRMNLPaint.divider({ dir }), which resolves the level-6 rail straight from the live cascade (theme, bit depth and dark mode included), and applyBorder() paints the returned BorderFill onto a node. Unlike the .border--* utilities, the divider paints on the element itself, so it is probed there rather than on a pseudo. See Painting Borders .