Holo Divider

The <holo-divider> component renders a native <hr> in shadow DOM, which gets the separator role implicitly. Use the orientation prop to switch between a horizontal rule and a vertical divider for use inside flex layouts.

When to use

Use it for:

• Separating distinct groups of content with a visible rule, horizontally between sections or vertically between inline items.

Don’t use it for:

• Spacing alone. Use gap in Stack or Grid.
• Dividing table rows or list items. Style those with their own borders.
• Page structure for assistive technology. Use headings and landmarks.

Live Previews

Horizontal (default)

Section one

Section two

<p>Section one</p>
<holo-divider></holo-divider>
<p>Section two</p>

Vertical

LeftRight

<holo-divider orientation="vertical"></holo-divider>

Accessibility

The divider is non-interactive. It renders a native <hr> with aria-orientation set to horizontal or vertical, so it is exposed as a separator. The line colour is decorative (below 3:1 by design), so never rely on it as the only cue between groups.

You provide:

• Real headings or landmarks for structure. A separator does not name or label the sections it divides.
• Restraint. Screen readers can announce each separator, so avoid many in a row.

---

API Reference

Importing

import '@philbob-sideprojects/hololink-ui/holo-divider';

Properties

Property	Attribute	Type	Default	Description
orientation	orientation	"horizontal" | "vertical"	'horizontal'	The axis along which the divider renders.

CSS custom properties

Property	Description
--holo-divider-color	Color of the rule.
--holo-divider-thickness	Thickness of the rule.