Skip to content Skip to footer navigation
Light theme Dark theme
You are reading the Statamic 6 Alpha docs. 👀

Separator

Clean and consistent visual separators for content sections.

<ui-separator text="vs" />

Variants

Separators come in two styles. Use them to match the aesthetic of your interface.

<div class="flex flex-col w-full">

    <ui-separator text="Line Separator (Default)" />

    <ui-separator variant="dots" text="Dotted Separator" />

</div>

Text

Add text to your separator with the text prop.

<ui-separator text="Breaker High" />

Vertical

Use the vertical prop to create a vertical separator.

Left Content
Right Content
<div class="flex items-center h-6 space-x-4">

    <div>Left Content</div>

    <ui-separator vertical />

    <div>Right Content</div>

</div>