Divider | NDS - Vanilla National Design System

Plain Divider

A single line between blocks of content. The spacing above and below scales through size modifiers so the separator breathes with the content around it.

Content above the divider.

Content below the divider.

Inside a Dropmenu

A common case for <hr class="nds-divider"> is separating groups of actions inside a menu (for example, routine actions from destructive ones).

Separator between action groups

Vertical Divider

Add nds-vertical and the same class renders as a vertical rule stretched to the parent's cross axis. Useful between inline stats, meta groups, or button clusters.

Inline stats with vertical separators

125K Services

4.8 Rating

23K Reviews

Divider with Text

Adding any child content flips the divider into a flex row with two flanking lines. Useful for labeling sections or introducing alternative paths like "or continue with".

Label between two lines

Sign in with National Single Sign-On

Use the credentials from your Nafath account to access the services provided by the university.

Continue with Nafath

or

Built-in Features

Text Annotation

Any child content automatically turns the divider into a centered label flanked by two balanced lines, no extra markup needed.

Spacing and Size

Six spacing modifiers from nds-md through nds-4xl control the margin around the rule, and the --divider-size token controls line thickness.

Writing-mode Aware

Uses logical properties, so a parent in vertical writing-mode renders the divider as a vertical line without extra rules.

Works on Any Element

Apply to <div>, <span>, or <hr>. Browser defaults on <hr> are reset so the result is consistent.

Usage Guidelines

Best Practices

Use a plain divider to break up a long section of content when white space alone is not enough to signal a transition
Use a divider with text to introduce an alternative path (for example "or", "continue with", or section labels between form groups)
Use <hr class="nds-divider"> when the separation marks a thematic break in the content, and <div class="nds-divider"> when it is purely visual
Do not use a divider to separate items inside a list. Add nds-divided to the list itself so the rule aligns with each row
Do not use a divider between a card and its surrounding text. Cards already carry their own boundary and an extra rule adds visual noise
Pick the smallest size that gives enough breathing room. Oversized variants (nds-3xl, nds-4xl) are for major section breaks, not paragraphs
Keep text inside a divider short: a single word or short phrase reads cleanly, longer sentences compete with the rules themselves
Override --divider-color locally to match surrounding surfaces (dark panels, tinted cards) rather than changing the global token

Modifier Classes

Class	Description
`nds-vertical`	Flips the rule to a vertical line. Stretches to the flex parent's cross axis. Spacing modifiers apply inline instead of block
`nds-md`	Medium spacing around the rule
`nds-lg`	Large spacing around the rule
`nds-xl`	Extra-large spacing around the rule
`nds-2xl`	2X-large spacing around the rule
`nds-3xl`	3X-large spacing around the rule
`nds-4xl`	4X-large spacing around the rule

CSS Custom Properties

Property	Default	Description
`--divider`	`--spacing-xs`	Block margin applied above and below the divider. Size modifiers override this value
`--divider-size`	`2px`	Thickness of the rule. Applies to the element border and the pseudo-element lines in the text variant
`--divider-color`	`--alpha-black-10`	Color of the rule. Swaps automatically to `--alpha-white-10` in dark mode. Override per-instance to match surrounding surfaces