Divider

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/elements

import "@eunomia/elements/divider.js";

<div>Section one</div>
<eun-divider></eun-divider>
<div>Section two</div>

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/elements

import "@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/elements

import { 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

Live testing

Properties

Orientation

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>

Server-side rendering

Before the divider upgrades, it's an empty element with no line and no spacing, and both appear at once on upgrade, shifting the content below. Link divider-ssr.css in the page's <head> to draw the final line from the first paint:

<link
  rel="stylesheet"
  href="node_modules/@eunomia/elements/dist/ssr/divider-ssr.css"
/>

A bundler that resolves package exports can reach it as @eunomia/elements/divider-ssr.css.

It covers both orientations and the --divider-* properties.

Customization

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>

The custom properties that change colors, borders, shadows and corners, at a glance. The API tab lists every property of the component.

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 once it is set, matching the ARIA separator role. A divider left horizontal by default relies on the role's implicit horizontal orientation instead.

Decorative dividers

Keep the default separator role whenever the line marks a real break between two groups of content, such as two sets of actions in a toolbar or two sections of a menu: screen readers announce it, which helps their users understand how the content is grouped.

When the line is purely visual and the content on either side is already separated in a way assistive technology understands (distinct headings, list items, landmarks), announcing it only adds noise. Remove it from the accessibility tree by supplying role="presentation", which the component leaves untouched:

<eun-divider role="presentation"></eun-divider>

Don't combine aria-hidden="true" with the default separator role: hiding the element makes the role meaningless, so pick one or the other. role="presentation" is the clearer choice of the two, since it states the intent directly.

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

MDN: ARIA separator role