divider separator icon decorative centered divider separator icon emoji star decorative centered divider with centered icon decorative section separator
Divider with Icon
Fetch pattern JSON:
curl https://webspire.de/patterns/divider/with-icon.json with-icon.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-[var(--ws-divider-text)]">
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" />
</svg>
</span>
</div>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
dividerseparatoricondecorativecentered
Slots
| Name | Required | Description |
|---|---|---|
| icon | Yes | Icon or emoji displayed centered on the divider line. |
A horizontal divider with a centered icon that sits on top of the line. Uses the same background cut-out technique as the label variant, but with an SVG icon instead of text. Swap the star for any icon or emoji.