Component
ki-divider
A static, decorative rule that visually separates adjacent content when spacing alone is not enough.
Notification settings
Privacy settings
<p>Notification settings</p><ki-divider></ki-divider><p>Privacy settings</p>Examples
Section titled “Examples”Vertical
Section titled “Vertical”orientation="vertical" separates side-by-side content; the divider takes
its size from your layout:
<div style="display: flex; align-items: center; gap: 0.75rem; block-size: 2rem;"><span>Edit</span><ki-divider orientation="vertical"></ki-divider><span>Duplicate</span><ki-divider orientation="vertical"></ki-divider><span>Archive</span></div>API reference
Section titled “API reference”When to use: visually separate adjacent content when spacing alone is not enough: grouped settings sections, toolbar action groups, distinct regions inside a card — horizontal between stacked content, vertical between side-by-side content.
When not to use: between list items (separation is a ki-list theme-token decision), semantic thematic breaks in running prose (native <hr> carries those semantics — the divider is deliberately decorative and contributes no role, name or announcement), as a border or outline substitute (surface/border tokens), or purely decorative flourishes (prefer white space).
Properties & attributes
| Attribute | Property | Type | Default | Description |
|---|---|---|---|---|
orientation | orientation | "horizontal" | "vertical" | 'horizontal' | Layout axis of the rule: horizontal spans the available inline size between stacked content; vertical stretches to the cross size its layout context provides, between side-by-side content. A structural axis, never appearance — thickness, color, end caps and gutter are per-theme --ki-divider-* tokens. An unrecognized value matches no style selector, so the divider keeps the default horizontal rendering (fallback by CSS construction — no validation code). |
CSS parts
| Part | Description |
|---|---|
divider | The rule itself: thickness, color and end-cap radius. |
CSS custom properties
The public styling contract of ki-divider: reassign these tokens at :root or on a subtree — never override internals.
| Token | Description |
|---|---|
--ki-divider-color | color used by the divider component for the rule: Outline/base_em (Black/3 light, White/3 dark), the exact variable bound to every Figma divider variant and the same semantic role ki-list uses for item dividers. |
--ki-divider-radius | dimension used by the divider component for the end caps: the MarsUI ends axis is a pure-appearance, per-theme choice (FR-006); onmars keeps the rounded hairline (ends=rounded, pill caps). |
--ki-divider-spacing | dimension used by the divider component for the reserved gutter: the 8px MarsUI variant frame with the rule centered inside it (FR-007). |
--ki-divider-thickness | dimension used by the divider component for the rule thickness: the MarsUI 1px hairline verified on the Divider_horizontal/Divider_vertical sets (specs/020-ki-divider/design-extraction.md). |
--ki-motion-duration-fast | Fast interaction transition duration. |
--ki-motion-easing-standard-decelerate | Utility entrance curve. M3 md.sys.motion.easing.standard-decelerate. onmars: the MarsUI decelerate curve (ki.easing.out). |
--ki-typography-family-body | semantic font family for typography family body. |
Accessibility
Section titled “Accessibility”The divider is deliberately decorative: it contributes no role, name or
announcement. For semantic thematic breaks in running prose, use native
<hr>, which carries those semantics. Between list items, separation is a
ki-list theme-token decision, not a divider.