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

Vertical rules scale their height in flex layouts:

vue

With stacks

They can also be used in stacks :

First item
Second item
Third item
vue
On this page