Divider
Divider is a thin line that separates two areas of content, horizontal or vertical.
When to use
Reach for a divider to mark a structural break between two blocks of content, such as sections in a page, items in a list, or entries in a toolbar, where spacing alone isn't a clear enough boundary. It carries no content of its own. For a labeled break (e.g. "OR" between two form sections), place text next to it in your own markup rather than expecting a divider to render one.
Install & usage
Pick a framework in the toolbar above and these snippets adapt.
npm install @eunomia/elementsimport "@eunomia/elements/divider.js";<div>Section one</div>
<eun-divider></eun-divider>
<div>Section two</div>Importing the file registers <eun-divider> as a custom element, with no
further setup needed. It works with any framework, or none, since it's a
standard web component.
npm install @eunomia/elements<script type="module">
import "@eunomia/elements/divider.js";
</script>
<div>Section one</div>
<eun-divider></eun-divider>
<div>Section two</div>npm install @eunomia/elementsimport "@eunomia/elements/divider.js";
function Sections() {
return (
<>
<div>Section one</div>
<eun-divider></eun-divider>
<div>Section two</div>
</>
);
}npm install @eunomia/elements"use client";
import "@eunomia/elements/divider.js";
export function Sections() {
return (
<>
<div>Section one</div>
<eun-divider></eun-divider>
<div>Section two</div>
</>
);
}npm install @eunomia/elements<script setup>
import "@eunomia/elements/divider.js";
</script>
<template>
<div>Section one</div>
<eun-divider></eun-divider>
<div>Section two</div>
</template>npm install @eunomia/elementsimport { CUSTOM_ELEMENTS_SCHEMA, Component } from "@angular/core";
import "@eunomia/elements/divider.js";
@Component({
selector: "app-sections",
template: `
<div>Section one</div>
<eun-divider></eun-divider>
<div>Section two</div>
`,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class SectionsComponent {}Guidance
- Use
orientation="vertical"inside a flex or grid parent: it relies onalign-self: stretchto span the available height (see "Vertical" in the Examples tab) - Override
--divider-spacingper instance when the surrounding layout already has its own gap, rather than stacking the divider's default margin on top of it - Leave
--divider-coloruntouched in most cases: it already tracks the shared--eun-border-colortoken, so it stays consistent with borders elsewhere on the page
- Reaching for a divider where spacing alone already reads as a clear break: an extra line can add visual noise rather than clarity
- Using
orientation="vertical"outside a flex/grid parent, or without giving it an explicit height some other way: with nothing to stretch against, it collapses to zero height and renders invisibly - Expecting a labeled divider (e.g. "OR") out of the box: slot your own label next to it, since it has no content of its own
Live testing
Properties
Divider <eun-divider>
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
| orientation | EunomiaDividerOrientation | 'horizontal' | The direction the line runs along |
Import the exact TypeScript type behind any property above, see
CSS custom properties
| Name | Description |
|---|---|
| --divider-color | Sets the color of the line, defaulting to the shared border color token |
| --divider-spacing | Sets the margin on either side of the line, along its perpendicular axis |
Horizontal
The default orientation. Spans the full width of its parent, with margin
above/below controlled by --divider-spacing.
<div>Section one</div>
<eun-divider></eun-divider>
<div>Section two</div>Vertical
orientation="vertical" spans the available height of its flex/grid
parent, via align-self: stretch, with margin left/right controlled by
--divider-spacing.
<div style="display: flex; align-items: stretch;">
<div>Left</div>
<eun-divider orientation="vertical"></eun-divider>
<div>Right</div>
</div>Custom color
--divider-color overrides the line color, falling back to the shared
--eun-border-color token when unset.
<eun-divider style="--divider-color: #1a73e8;"></eun-divider>Custom spacing
--divider-spacing overrides the margin on either side of the line
(margin-block when horizontal, margin-inline when vertical), defaulting
to --eun-space-m (16px).
<eun-divider style="--divider-spacing: 4px;"></eun-divider>Role and orientation
eun-divider sets role="separator" on itself once connected, unless the
consumer already supplied a role attribute, in which case that value is
left untouched. aria-orientation is kept in sync with the orientation
property ("horizontal" or "vertical"), matching
separator role
Non-focusable
eun-divider isn't a focusable element and doesn't appear in the tab
order: it's a structural marker, not an interactive control.
Reference links
separator role