Divider
Visual separator in horizontal or vertical orientation.
<rhx-divider>
Examples
Horizontal
Content above the divider.
Content below the divider.
<p>Content above the divider.</p>
<rhx-divider />
<p>Content below the divider.</p>Vertical
Left
Right
<div style="display: flex; align-items: stretch; height: 48px; gap: var(--rhx-space-md);">
<span>Left</span>
<rhx-divider rhx-vertical />
<span>Right</span>
</div>Properties
| Property | Type | Default | Description |
|---|---|---|---|
rhx-vertical |
bool |
false |
Renders a vertical divider instead of horizontal |
Accessibility
- Renders with
role="separator"to indicate a thematic break to assistive technology. - Horizontal dividers set
aria-orientation="horizontal"(the default). - Vertical dividers set
aria-orientation="vertical"to communicate the orientation.