1. Docs
2. Components
3. Misc
4. Divider

Divider 1.2.2

Use .velin-divider for horizontal rules, with text labels, vertical orientation, and colour/size variants. Deutsch: Trenner

When to use

• Visual separation between content blocks with the documented divider pattern.
• When a subtle rule is enough and you do not need a full card or section chrome.

When not

• Semantic sectioning — prefer real headings and landmarks over dividers alone.
• Interactive split panes or drawers — use layout/overlay components instead.

Basic Example

<hr class="velin-divider">

With Text

<div class="velin-divider velin-divider--text">OR</div>

Vertical

<span>Left</span>
<span class="velin-divider velin-divider--vertical"></span>
<span>Right</span>

Sizes & Colours

<hr class="velin-divider velin-divider--sm">
<hr class="velin-divider velin-divider--lg">
<hr class="velin-divider velin-divider--thick velin-divider--primary">

Accessibility

• Use <hr> for semantic separators — it carries an implicit role="separator".
• For decorative dividers, use <div role="none"> instead.

CSS Variables

Related

• Card
• List Group
• Stat