Vertical rule

Use the custom vertical rule helper to create vertical dividers like the Vr component.

On this page

How it works

Vertical rules are inspired by the Vr component, allowing you to create vertical dividers in common layouts. They're styled just like Vr component:

  • They're 1px wide
  • They have min-height of 1em
  • Their color is set via currentColor and opacity

Customize them with additional styles as needed.

Example

vue
<template>
  <Vr />
</template>

Vertical rules scale their height in flex layouts:

vue
<template>
  <b-div
    flex
    style="height: 200px"
  >
    <Vr />
  </b-div>
</template>

With stacks

They can also be used in stacks :

First item
Second item
Third item
vue
<template>
  <b-div
    hstack
    :gap="3"
  >
    <b-div :padding="2">
      First item
    </b-div>
    <b-div
      :padding="2"
      margin="s-auto"
    >
      Second item
    </b-div>
    <Vr />
    <b-div :padding="2">
      Third item
    </b-div>
  </b-div>
</template>