Vertical Rule

A vertical divider between inline content

<div style="display:flex; gap:var(--hf-space-xs); align-items:stretch; height:2rem;">
    <div>Content</div>
    <hf-v-rule></hf-v-rule>
    <div>Content</div>
    <hf-v-rule></hf-v-rule>
    <div>Content</div>
</div>

Content

Notes

The vertical rule component provides a vertical divider between inline elements.

Use between inline or flex items to create visual separation
Renders a styled vertical <hr> element