A layout that simply pushes items away from each other where there is space in the viewport and stacks on small viewports.

Example

<div class="repel">
    <div class="bg-neutral p-block">Item 1 repels item 2</div>
    <div class="bg-neutral p-block">Item 2 repels item 1</div>
</div>

Vertical

Use the data-type="vertical" attribute to separate content vertically.

<div class="repel b-dotted" data-type="vertical" style="height: 200px">
    <div class="bg-neutral p-block">Item 1 repels item 2</div>
    <div class="bg-neutral p-block">Item 2 repels item 1</div>
</div>

In use

We use this in multiple places throughout our templates, for example in the titlebar to separate the page header and the actions:

<div class="repel">
    <h1 class="page-title h2">Page title</h1>
    <div class="cluster gap-sm self-start">
        <button class="button">Action</button>
        <button class="button" data-type="primary">Key action</button>
    </div>
</div>