Vertical rule

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.

<template>
 <Vr />
</template>

Vertical rules scale their height in flex layouts:

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

They can also be used in stacks :

<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>