Divider

A horizontal/vertical divider that separates content.

Horizontal

Basic divider

Example

With content

Content position

TextLeft alignedRight aligned

Example

Emphasized text

Section title

Example

strong bolds the text (font-weight 600), useful as section titles for content groups.

Line style

variant line styles (default solid, see above)

soliddasheddotteddoubledouble-dasheddouble-dotted

Example

variant is equivalent to the dashed boolean (the dashed attribute = variant="dashed"; an explicit variant takes priority). Line styles apply to the horizontal layout only — vertical dividers (direction="vertical") render solid lines regardless of variant (an existing boundary covering dashed/dotted/double/double-*).

Inset

inset / middle

inset — empty on the start sidemiddle — empty on both sides

Example

Spacing size

size options

smallmedium (default)large

Example

Dashed

Dashed (compat shorthand)

Example

Vertical

Vertical divider

TextText

Example

Stretches inside flex containers

Card ACard BCard C

Example

A vertical divider stretches to the full row height inside flex/grid containers; in inline context it stays at 1em text height.

Vertical content alignment

In vertical mode, content-position accepts top (top-aligned) / center (default, centered) / bottom (bottom-aligned); the text reads horizontally while the vertical line runs on either side of it (top-aligned: the line extends downward from the text; bottom-aligned: upward; centered: a segment on each side). In horizontal mode only left / center / right apply — using a cross-direction value (e.g. horizontal + top, vertical + left) falls back to center with a console warning. The top/bottom inset goes through the --oas-divider-title-inset variable (default 5%).

Vertical text alignment

TopCenterBottom

Example

Text orientation on a vertical divider: text-orientation="vertical" renders the text vertically (following the line direction, top to bottom); default horizontal reads normally. Only meaningful for vertical dividers (ignored on horizontal ones).

Vertical text orientation

Horizontal textVertical textTop

Example

Vertical dividers also support inset spacing: inset (top-side spacing) / middle (both top and bottom spacing), sharing the same variables as horizontal dividers (--oas-divider-title-inset / --oas-divider-middle-inset).

Vertical inset

inset top spacemiddle both sides

Example

Custom styling

The color attribute accepts 11 preset names (auto-adapting to light/dark themes) or any CSS color value (takes effect immediately, overriding presets and defaults); line width, spacing and the title-side gap go through CSS variables:

Preset palette

magentaredvolcanoorangegoldlimegreencyanbluegeekbluepurple

Example

Custom color values (highest priority)

Teal dashedPurple solid

Example

CSS variables

Compact spacingFixed 120px gap on the title side2px thick line

Example

Variable	Description	Default
--oas-divider-width	Line width	1px
--oas-divider-color	Line color	border token
--oas-divider-spacing	Vertical spacing (default for size options; overrides all three once set)	size-matched space token
--oas-divider-title-inset	Gap on the title side (content-position=left/right and inset)	5%
--oas-divider-middle-inset	Gap on both sides for middle	16.67%
--oas-divider-double-gap	Gap between the two lines of double	3px

API

oas-divider

Attributes

Attribute	Description	Type	Default
color	Color: accepts 11 preset names (mapped to --oas-preset-* tokens) or any CSS color value	string	—
content-position	Content position	string	—
dashed	Dashed	boolean	—
direction	Direction	DividerDirection	horizontal
inset	Indent: start-side inset of a horizontal line (default 5%, via --oas-divider-title-inset), aligned with the title inset	boolean	—
middle	Symmetric inset: equal insets on both sides of a horizontal line (default 16.67%, via --oas-divider-middle-inset)	boolean	—
size	Spacing tier: small / medium (default) / large; horizontal layout only	string	—
strong	Bolder divider title (font-weight 600)	boolean	—
text-orientation	Text orientation on a vertical divider: horizontal (default, reads normally) / vertical (vertical, top-to-bottom along the line); only meaningful for vertical dividers	string	—
variant	Line style: solid / dashed / dotted / double / double-dashed (double dashed) / double-dotted (double dotted); an explicit value takes precedence over the dashed boolean (compat form). Line styles apply to horizontal layout only	string	—

Slots

Name	Description
default	Content in the middle of the divider

CSS Variables

CSS Variable	Default
--oas-divider-color	var(--oas-color-border-strong)
--oas-divider-double-gap	3px
--oas-divider-middle-inset	16.67%
--oas-divider-spacing	var(--oas-space-4)
--oas-divider-title-inset	5%
--oas-divider-width	1px