Divider
A horizontal/vertical divider that separates content.
Horizontal
Basic divider
With content
Content position
Emphasized text
strong bolds the text (font-weight 600), useful as section titles for content groups.
Line style
Four variants
variant is equivalent to the dashed boolean (the dashed attribute = variant="dashed"; an explicit variant takes priority).
Inset
inset / middle
Spacing size
size options
Dashed
Dashed (compat shorthand)
Vertical
Vertical divider
Stretches inside flex containers
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
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
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
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
Custom color values (highest priority)
CSS variables
| 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
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) / ertical (vertical, top-to-bottom along the line); only meaningful for vertical dividers | string | — |
variant | Line style: solid / dashed / dotted / double; an explicit value takes precedence over the dashed boolean (compat form) | string | — |
Slots
| Name | Description |
|---|---|
| default | — |