1. Docs
2. Components
3. Divider

Divider

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

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