Divider

A thin visual rule used to separate content sections or items. Supports horizontal and vertical orientations.

When to use

✓Use to create a clear visual boundary between unrelated sections of content.
✓Use horizontal dividers between list items, card sections, and settings groups.
✓Use vertical dividers to separate adjacent items in a horizontal toolbar or nav bar.
✓Use sparingly — rely on spacing and layout hierarchy first; only add a divider when the separation is not clear enough.

Don't

✕Don't use dividers between every item in a list — it creates visual noise.
✕Don't use a divider as a substitute for adequate whitespace.
✕Don't use vertical orientation without a flex or grid parent — the component requires a containing block with a defined height to stretch correctly.
✕Don't style the divider line colour to convey meaning — it is decorative only.

Horizontal orientation

The default orientation. The host element behaves as a block and fills 100% of its container width. Drop it anywhere in a vertical flow.

<!-- Between two content sections -->
<section>Account details</section>
<diwa-divider />
<section>Notifications</section>

Vertical orientation

The host uses display: inline-flex and align-self: stretch, which means it stretches to fill the cross-axis of a flex or grid parent. The parent must be a flex or grid container with a defined height (or a height derived from its children), otherwise the divider will render at 0 px height and be invisible.

<!-- ✓ Correct — flex parent with items that establish a height -->
<div style="display: flex; align-items: stretch; height: 40px;">
  <span>Left</span>
  <diwa-divider orientation="vertical" />
  <span>Right</span>
</div>

<!-- ✕ Incorrect — block parent with no defined height -->
<div>
  <span>Left</span>
  <diwa-divider orientation="vertical" /> <!-- will be invisible -->
  <span>Right</span>
</div>

Tip: add a small margin on the vertical axis (e.g. style="margin: 8px 0") inside the flex container to prevent the divider from extending to the container's padding edge.

Theming

The divider colour derives from the --diwa-border design token, which automatically switches value between dark and light theme. You can override the token on the component or a parent:

<!-- Use the light theme token set -->
<diwa-divider theme="light" />

<!-- Override the line colour directly -->
<diwa-divider style="--diwa-border: #ff0000;" />