Vertical rule

.vr produces a vertical line styled after the <hr> element. The element is 1px wide with a min-height of 1em. Its color is controlled by the $vr-color and $vr-opacity Sass variables.

Example

Apply .vr as a bare inline element:

<div class="vr"></div>

Inside a flex container, .vr stretches to match the container's height:

<div class="d-flex" style="height: 200px;">
  <div class="vr"></div>
</div>

With stacks

.vr integrates naturally with stacks as a visual separator:

<div class="hstack gap-medium">
  <div class="p-xsmall">First item</div>
  <div class="p-xsmall ms-auto">Second item</div>
  <div class="vr"></div>
  <div class="p-xsmall">Third item</div>
</div>

CSS

.vr has no CSS custom properties; width, color, and opacity are set at compile time via Sass variables.

.vr {
  display: inline-block;
  align-self: stretch;
  width: $vr-size;
  min-height: 1em;
  background-color: $vr-color;
  opacity: $vr-opacity;
}

Sass variables

Customize the vertical rule Sass variables to adjust its width, color, and opacity.

$vr-size:                   $hr-size;
$vr-color:                  $hr-color;
$vr-opacity:                $hr-opacity;