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