Divider
A thin visual rule used to separate content sections or items. Supports horizontal and vertical orientations.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Direction of the divider line. horizontal renders a full-width 1 px rule (display: block). vertical renders a 1 px rule that stretches to the parent height (align-self: stretch). The parent must be a flex or grid container with a defined height. |
theme | 'light' | 'dark' | 'dark' | Per-component theme override. Sets data-theme on the host element so design tokens cascade into Shadow DOM. |
Events
diwa-divider is non-interactive and emits no events.
Slots
diwa-divider has no slots. It renders a single <hr> element with no child content.
CSS custom properties
Override this token on the host element or a parent selector to customise the divider colour without modifying source styles.
| Property | Fallback | Description |
|---|---|---|
--diwa-border | zinc-700 (dark) / zinc-300 (light) | Colour of the divider line. Automatically switches between dark and light theme values via the token system. |