Divider — lunaDOM Docs

The <luna-divider> component provides elegant horizontal and vertical dividers with labels, variants, and custom styling.

Paths

/lunadom/components/divider/divider.js

REQUIRED

Basic Dividers

Content above

Content below

Variants

Subtle (near-invisible)

Default (standard separator)

Strong (more visible)

Gradient (elegant fade)

Line Styles

Solid

Dashed

Dotted

With Labels

Section A content

SECTION B

Section B content

Alternative content

Label Positions

Start

Start Label

Center (default)

Center Label

End

End Label

Spacing

Default spacing

Content

With 2rem spacing

Content

Vertical Dividers

Left

Center

Right

Action 1

Action 2

Action 3

Custom Styling

Custom Red

Custom Gradient

Customization

Slots
default - Optional label text displayed at midpoint

Attributes
vertical - Renders a vertical divider
variant - Visual weight (subtle, default, strong, gradient)
style-line - Line style (solid, dashed, dotted)
label-position - Label placement (start, center, end)
spacing - Vertical margin (CSS length)

CSS Variables
--luna-divider-color - Line color
--luna-divider-thickness - Line thickness
--luna-divider-radius - Border radius of line
--luna-divider-gap - Gap between label and line
--luna-divider-spacing - Block margin override
--luna-divider-label-color - Label text color
--luna-divider-label-size - Label font size
--luna-divider-gradient - Custom gradient for gradient variant

Events
luna-divider-show - Emitted when the divider is shown
luna-divider-hide - Emitted when the divider is hidden

Example Code

<luna-divider></luna-divider>  <luna-divider variant="subtle"></luna-divider> <luna-divider variant="default"></luna-divider> <luna-divider variant="strong"></luna-divider> <luna-divider variant="gradient"></luna-divider>  <luna-divider style-line="solid"></luna-divider> <luna-divider style-line="dashed"></luna-divider> <luna-divider style-line="dotted"></luna-divider>  <luna-divider>SECTION LABEL</luna-divider> <luna-divider label-position="start">Left</luna-divider> <luna-divider label-position="end">Right</luna-divider>  <luna-divider spacing="2rem"></luna-divider>  <div style="display: flex; align-items: center; gap: 1rem;"> <span>Left</span> <luna-divider vertical></luna-divider> <span>Right</span> </div>  <luna-divider variant="strong" style=" --luna-divider-color: #ef4444; --luna-divider-thickness: 3px; " >Custom</luna-divider> <luna-divider variant="gradient" style="--luna-divider-gradient: linear-gradient(to right, transparent, #60a5fa, transparent);" ></luna-divider>