Separator
The Separator is a native web component that renders a dividing rule to visually separate blocks of content. It supports horizontal (default) or vertical orientation and an optional centered text label. Use it to divide page sections, list items, or to group related content.
Preview
<div style="max-width: 360px;">
<p>Your account was created successfully.</p>
<pura-separator></pura-separator>
<p>Review your settings below.</p>
<pura-separator label="or continue with"></pura-separator>
<div style="display: flex; align-items: center; gap: 12px;">
<span>Profile</span>
<pura-separator orientation="vertical"></pura-separator>
<span>Security</span>
<pura-separator orientation="vertical"></pura-separator>
<span>Notifications</span>
</div>
</div>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
orientation | string | horizontal | Direction of the line: "horizontal" or "vertical". |
label | string | — | Optional text centered between two lines (forces the horizontal layout with a label). |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/separator.js"></script>import "./pura/lib/separator.js";