1. Docs
2. CSS Utilities
3. Helpers
4. Vertical Rule

Vertical Rule 1.2.2

Use .velin-vr to create a vertical divider, perfect for separating content in horizontal layouts such as navbars, toolbars, and horizontal stacks. Deutsch: vertikale-linie

When to use

• Use Vertical Rule helpers/content styles for readable, accessible markup.

When not

• Do not use .velin-vr as a horizontal divider — use borders or <hr> / content dividers instead.
• Avoid stacking multiple rules where spacing alone would separate toolbar actions.

How it works

The .velin-vr class renders a self-sizing vertical rule as an inline-block element with a 1px width. It stretches to match the height of its parent via align-self: stretch, and its colour adapts to the current text colour using currentcolor.

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

Example

Place .velin-vr between flex children to add a subtle vertical separator.

<div class="velin-flex align-items-center" style="gap:.75rem">
  <span>First item</span>
  <div class="velin-vr"></div>
  <span>Second item</span>
  <div class="velin-vr"></div>
  <span>Third item</span>
</div>

With navs

Vertical rules work well inside navigation elements to visually separate links.

<nav class="velin-flex align-items-center" style="gap:.75rem">
  <a href="#">Home</a>
  <div class="velin-vr"></div>
  <a href="#">Products</a>
  <div class="velin-vr"></div>
  <a href="#">About</a>
  <div class="velin-vr"></div>
  <a href="#">Contact</a>
</nav>

With horizontal stacks

Combine .velin-vr with the horizontal stack helper (.velin-stack-h) for a quick toolbar-style layout.

<div class="velin-stack-h" style="gap:.75rem">
  <button class="velin-btn velin-btn--sm velin-btn--primary">Save</button>
  <div class="velin-vr"></div>
  <button class="velin-btn velin-btn--sm velin-btn--secondary">Edit</button>
  <button class="velin-btn velin-btn--sm velin-btn--secondary">Duplicate</button>
  <div class="velin-vr"></div>
  <button class="velin-btn velin-btn--sm velin-btn--danger">Delete</button>
</div>