Divider

Explicit structural separators. Use sparingly — prefer tonal surface shifts for subtle grouping.

Horizontal

DEFAULT

<hr class="nf-divider" />

Color variants

PRIMARY / SECONDARY / TERTIARY

<hr class="nf-divider nf-divider-primary" />
<hr class="nf-divider nf-divider-secondary" />
<hr class="nf-divider nf-divider-tertiary" />

Vertical

Use inline in flex rows:

VERTICAL

NODE_ANODE_BNODE_C

<div style="display: flex; align-items: center; gap: var(--nf-space-3);">
<span>NODE_A</span>
<span class="nf-divider-vertical"></span>
<span>NODE_B</span>
<span class="nf-divider-vertical"></span>
<span>NODE_C</span>
</div>

Labeled divider

WITH LABEL

SECTOR_BOUNDARY

<div class="nf-divider-labeled">
<span class="nf-divider-label">SECTOR_BOUNDARY</span>
</div>

Class reference

Class	Description
`nf-divider`	Horizontal rule — 2px border-top
`nf-divider-primary`	Primary green accent
`nf-divider-secondary`	Secondary magenta accent
`nf-divider-tertiary`	Tertiary purple accent
`nf-divider-vertical`	Inline vertical rule — 1em tall
`nf-divider-labeled`	Flex row with line on each side of a label
`nf-divider-label`	Label text inside `.nf-divider-labeled`