Vertikale Linie 1.2.0

Nutze .velin-vr, um eine vertikale Trennlinie fuer horizontale Layouts wie Navbars, Toolbars und horizontale Stacks zu erzeugen. English: vertical-rule

Reifegrad: Dokumentiert als stable in VelinStyle 1.2.0. Design Intelligence (Plan / Review / Agent-Meta) ist separat und dort beta / foundation, wo es vermerkt ist.

Wann verwenden

Nutze .velin-vr, um Aktionen oder Linkgruppen in horizontalen Layouts dezent zu trennen.

Wann nicht verwenden

Nutze .velin-vr nicht als horizontale Linie; verwende dafuer Border, <hr> oder Content-Divider.
Vermeide mehrere Linien, wenn Abstand allein die Aktionen klar trennt.

Funktionsweise

.velin-vr rendert eine selbstgroessierende vertikale Linie als inline-block mit 1px Breite. Sie streckt sich ueber align-self: stretch auf die Hoehe des Elternkontexts und nutzt currentcolor.

.velin-vr {
  display: inline-block;
  align-self: stretch;
  width: 1px;
  min-height: 1em;
  background-color: currentcolor;
  opacity: 0.25;
}

Beispiel

Platziere .velin-vr zwischen Flex-Kindern, um eine dezente vertikale Trennung einzufuegen.

Erstes Element

Zweites Element

Drittes Element

<div class="velin-flex align-items-center" style="gap:.75rem">
  <span>Erstes Element</span>
  <div class="velin-vr"></div>
  <span>Zweites Element</span>
  <div class="velin-vr"></div>
  <span>Drittes Element</span>
</div>

Mit Navs

Vertikale Linien funktionieren gut in Navigationselementen, um Links visuell zu trennen.

<nav class="velin-flex align-items-center" style="gap:.75rem">
  <a href="#">Start</a>
  <div class="velin-vr"></div>
  <a href="#">Produkte</a>
  <div class="velin-vr"></div>
  <a href="#">Ueber uns</a>
  <div class="velin-vr"></div>
  <a href="#">Kontakt</a>
</nav>

Mit horizontalen Stacks

Kombiniere .velin-vr mit dem horizontalen Stack .velin-stack-h fuer schnelle Toolbar-Layouts.

<div class="velin-stack-h" style="gap:.75rem">
  <button class="velin-btn velin-btn--sm velin-btn--primary">Speichern</button>
  <div class="velin-vr"></div>
  <button class="velin-btn velin-btn--sm velin-btn--secondary">Bearbeiten</button>
  <button class="velin-btn velin-btn--sm velin-btn--secondary">Duplizieren</button>
  <div class="velin-vr"></div>
  <button class="velin-btn velin-btn--sm velin-btn--danger">Loeschen</button>
</div>