Divider

<loomi-divider> — a themeable content divider for separating layout regions horizontally or vertically.

npm install @loomidev/divider lit

import "@loomidev/divider";

Basic Usage

<loomi-divider></loomi-divider>

With Content

Use label for simple text, or the default slot for richer content.

Account

<loomi-divider label="Today"></loomi-divider>

<loomi-divider color="primary">
  <strong>Account</strong>
</loomi-divider>

Vertical Divider

Vertical dividers stretch to their parent height. Give the surrounding layout a height or let content define it.

Left panel

Right panel

<div style="display:flex;gap:1rem;min-height:8rem">
  <section>Left panel</section>
  <loomi-divider orientation="vertical"></loomi-divider>
  <section>Right panel</section>
</div>

Vertical dividers can carry content too.

<loomi-divider orientation="vertical" label="or"></loomi-divider>

Alignment And Styles

<loomi-divider label="Start" align="start"></loomi-divider>
<loomi-divider label="End" align="end" variant="dashed"></loomi-divider>
<loomi-divider label="Dotted" variant="dotted" thickness="2px"></loomi-divider>

Accessibility

For the library-wide baseline, see Foundations — Accessibility.

Responsive behavior

For the shared container and viewport rules, see Foundations — Responsive behavior.

Dark mode

For theme activation, token overrides, and contrast guidance, see Foundations — Dark mode.

Attributes

Attribute	Default	Description
orientation	horizontal	horizontal | vertical
label	(blank)	Simple divider text. The default slot takes precedence when present.
align	center	Content alignment: start | center | end.
variant	solid	Rule style: solid | dashed | dotted.
color	gray	Any loomi color.
thickness	1px	CSS length for the rule thickness.
spacing	0.75rem	CSS length for the gap around divider content.

Slots

Slot	Description
(default)	Content placed inside the component.

Dependencies

• @loomidev/core