Divider

Provides a new utility class divider so you can easily separate content.

View Source 

Examples

Basic

<div class="flex flex-col gap-4">
    <div class="flex items-center gap-2">
        <button class="x-button accent-main flex-grow">Register</button>
        <button class="x-button flex-grow">Login</button>
    </div>
    <div class="divider">OR</div>
    <div class="flex items-center gap-2">
        <button class="x-button muted flex-grow">Facebook</button>
        <button class="x-button muted flex-grow">Google</button>
        <button class="x-button muted flex-grow">Apple</button>
    </div>
</div>

Vertical

<div class="flex gap-4">
    <div class="flex flex-col gap-2">
        <button class="x-button accent-main flex-grow">Register</button>
        <button class="x-button flex-grow">Login</button>
    </div>
    <div class="divider flex flex-col">OR</div>
    <div class="flex flex-col gap-2">
        <button class="x-button muted flex-grow">Facebook</button>
        <button class="x-button muted flex-grow">Google</button>
        <button class="x-button muted flex-grow">Apple</button>
    </div>
</div>

Custom

<div class="flex flex-col gap-4">
    <div class="flex items-center gap-2">
        <button class="x-button accent-main flex-grow">Register</button>
        <button class="x-button flex-grow">Login</button>
    </div>
    <div class="divider before:hidden after:border-dashed after:border-accent accent-primary">OR</div>
    <div class="flex items-center gap-2">
        <button class="x-button muted flex-grow">Facebook</button>
        <button class="x-button muted flex-grow">Google</button>
        <button class="x-button muted flex-grow">Apple</button>
    </div>
</div>