Vertical rule

Use the custom vertical rule helper to create vertical dividers like the <hr> element.

Overview #

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.

You can customize them with additional styles as needed.

Item 1
Item 2
HTML 
<div class="d-flex">
  <div>Item 1</div>
  <div class="vr mx-3"></div>
  <div>Item 2</div>
</div>

Vertical rules scale their height in flex layouts to match the tallest element.

1
2
HTML 
<div class="d-flex">
  <div>1</div>
  <div class="vr mx-3"></div>
  <div>2</div>
</div>

With stacks #

You can also use vertical rules with stacks.

First
Second
Third
HTML 
<!-- Horizontal stack with vertical rule -->
<div class="hstack gap-2">
  <div>First</div>
  <div>Second</div>
  <div class="vr ms-auto"></div>
  <div>Third</div>
</div>
Up next
Visually hidden

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.