Separator

A horizontal divider using the native <hr> element.

Standalone

<link rel="stylesheet" href="https://esm.sh/@erikt/ui/separator.css" />

Default

Above the separator


Below the separator

<p>Above the separator</p>
<hr />
<p>Below the separator</p>

With label

Add a data-label attribute to show text centered over the line.


<hr data-label="Appearance Settings" style="--bg-color: var(--ui-neutral-0)" />

API reference

Type Classes / attributes What it does
Label [data-label="Text"] Shows the text centered on the line
Label background --bg-color: var(--ui-neutral-0) Background behind the label, to match the surface

Search 5021 icons

Type a name to find icons from the Tabler icon set.

      Move Open Esc Close