Cluster

A layout that distributes items with consistent spacing, regardless of their size.

Example

<div class="cluster">
    <div class="bg-neutral p-block">Item 1</div>
    <div class="bg-neutral p-block">Item 2</div>
    <div class="bg-neutral p-block">Item 3</div>
    <div class="bg-neutral p-block">Item 4</div>
    <div class="bg-neutral p-block">Wider Item 5</div>
    <div class="bg-neutral p-block">Item 6</div>
    <div class="bg-neutral p-block">Item 7</div>
    <div class="bg-neutral p-block">Wider Item 8</div>
</div>

In use

We use these in various 'toolbar' or 'action group'-type compositions, such as the actions group in our app headers:

<div class="actions-group cluster">
    <button type="button" class="icon-button dropdown__control" ...>
        <svg>...</svg>
    </button>
    <button type="button" class="icon-button dropdown__control" ...>
        <svg>...</svg>
    </button>
    <button class="avatar dropdown__control" ...>
        <div class="avatar__initials" data-initial="JD"></div>
        <span class="counter">2</span>
    </button>
</div>