divider separator label text centered divider separator label text or section centered divider with centered text labeled section separator
Divider with Label
Fetch pattern JSON:
curl https://webspire.de/patterns/divider/with-label.json with-label.html
<div class="ws-divider py-8">
<div class="relative">
<div class="absolute inset-0 flex items-center" aria-hidden="true">
<div class="w-full border-t border-[var(--ws-divider-color)]"></div>
</div>
<div class="relative flex justify-center">
<span class="bg-[var(--ws-color-surface)] px-3 text-sm text-[var(--ws-divider-text)]">or</span>
</div>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
dividerseparatorlabeltextcentered
Slots
| Name | Required | Description |
|---|---|---|
| label | Yes | Text displayed centered on the divider line. |
A horizontal divider with a centered text label that sits on top of the line. The label background matches the page background to create a clean cut-out effect. Commonly used for “or” separators in login forms.