1. Docs
2. Erste Schritte
3. Trenner

Trenner 1.2.0

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

Wann verwenden

• 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.

Wann nicht verwenden

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

Einfaches Beispiel

<hr class="velin-divider">

Mit 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>

Größen & 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">

Barrierefreiheit

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

CSS-Variablen

Verwandt

• Card
• Listengruppe
• Stat