Skip to main content

Vertical rule

How it works​

Vertical rules are inspired by the <hr> element, allowing you to create vertical dividers in common layouts. They’re styled just like <hr> elements:

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

Result
Loading...
Live Editor
<div className="vr"></div>

Vertical rules scale their height in flex layouts:

Result
Loading...
Live Editor
<div className="d-flex" style={{ height: '200px' }}>
	<div className="vr"></div>
</div>

With stacks​

They can also be used in stacks:

Result
Loading...
Live Editor
<div className="hstack gap-3">
	<div className="p-2">First item</div>
	<div className="p-2 ms-auto">Second item</div>
	<div className="vr"></div>
	<div className="p-2">Third item</div>
</div>