Component API

<content-divider>

Open live example

A horizontal divider: a thin rule that visually separates two pieces of
content that are not otherwise contained in a box or frame and would bleed
into each other. With a label it renders the common "─── OR ───"
pattern — text centered between two line segments; without one it is a
single full-width rule. Exposed to assistive technology as a horizontal
separator, so it renders correctly with zero external CSS.

The vertical spacing above and below is tunable per instance via
--component-divider-spacing (default 1rem), and both the plain and
labeled forms reserve the same height, so toggling the label never shifts
surrounding layout.

Install

import "@f-ewald/components/content-divider.js";

Usage

<content-divider></content-divider>

<content-divider label="OR"></content-divider>

Attributes / properties

PropertyAttributeTypeDefaultDescription
labellabelstring""Optional centered label; empty renders a plain full-width rule.

Events

None.

Slots

None.

CSS custom properties

Custom property
--ui-border
--ui-border-width
--ui-font
--ui-font-size-sm
--ui-font-weight-medium
--ui-line-height-tight
--ui-text-muted