Vertical rule

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

How it works

Vertical rules are inspired by the Hr component, allowing you to create vertical dividers in common layouts. They're styled just like Hr 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="3">
   First item
  </b-div>
  <b-div
   :padding="3"
   margin="s-auto"
  >
   Second item
  </b-div>
  <Vr />
  <b-div :padding="3">
   Third item
  </b-div>
 </b-div>
</template>

See Also