Switcher

A layout that lays two items next to each other in a 50/50 split until there is not enough horizontal space to allow that. They will then stack.

Example

<div class="switcher">
    <div class="bg-neutral p-block">Item 1</div>
    <div class="bg-neutral p-block">Item 2</div>
</div>

In use

For example could be used on a login page for social sign in.

<div class="switcher">
    <button class="button">
        <svg ...></svg>
        <span>Log in with Google</span>
    </button>
    <button class="button">
        <svg ...></svg>
        <span>Log in with Microsoft</span>
    </button>
</div>