elements
Elements UI Display Separator

Separator

A horizontal or vertical rule between content, semantic or decorative.

Horizontal

Semantic by default: role=separator. It sets no margin; the layout spaces it.

Elements UI

Templates for every page an app needs.

Built on the theme contract.

Code
<h4>Elements UI</h4>
<p>Templates for every page an app needs.</p>
<Separator />
<p>Built on the theme contract.</p>

Usage

import { Separator } from "@elements/ui/separator";

<Separator />
<Separator orientation="vertical" />
<Separator decorative />
<Separator label="or" />

Examples

Vertical

Between inline links; it stretches to the row's height.

Code
<nav class="row">
  <a href="#">Blog</a>
  <Separator orientation="vertical" />
  <a href="#">Docs</a>
  <Separator orientation="vertical" />
  <a href="#">Source</a>
</nav>

Menu

Decorative rules between items that already read as separate. Below the md breakpoint Help and its rule are hidden.

Settings Manage preferences
Account Profile and security
Help Docs and support
Code
<div class="row">
  <div>Settings <span>Manage preferences</span></div>
  <Separator orientation="vertical" decorative />
  <div>Account <span>Profile and security</span></div>
  <Separator orientation="vertical" decorative class="md-only" />
  <div class="md-only">Help <span>Docs and support</span></div>
</div>

/* Help and its rule show from the md breakpoint up */
@media (width < 48rem) { .md-only { display: none; } }

List

Horizontal decorative rules between rows.

Item 1Value 1
Item 2Value 2
Item 3Value 3
Code
<div>
  <div><span>Item 1</span><span>Value 1</span></div>
  <Separator decorative />
  <div><span>Item 2</span><span>Value 2</span></div>
  <Separator decorative />
  <div><span>Item 3</span><span>Value 3</span></div>
</div>

With a label

Text centered in the rule. A semantic separator is named by it.

Sign inSign up
Code
<Separator label="or continue with" />
<Separator label="or" orientation="vertical" />

Custom

--separator-width and --separator-color on the element or a parent.

Code
<div style="--separator-width: var(--space-1); --separator-color: var(--accent)">
  <Separator />
</div>

RTL

Horizontal and vertical rules in a right-to-left region.

مكونات لكل صفحة.

Code
<div dir="rtl">
  <p>مكونات لكل صفحة.</p>
  <Separator />
  <nav><a href="#">المدونة</a><Separator orientation="vertical" /><a href="#">التوثيق</a></nav>
</div>
Reference Separator in the manual Every part, attribute, slot, key and data attribute.