Cluster | Brio

Cluster is another layout option that comes from the Every Layout set of patterns. It provides a horizontal flow in a flex container. Use it for all kinds of horizontal needs, such as toolbars, button rows, and other horizontal groups.

Examples

Default

The default cluster is a horizontal flex container that wraps to multiple rows as needed. It never overflows.

One

Two

Three

Four

<h3>Default</h3>
    <p>
        The default cluster is a horizontal flex container that wraps to multiple rows as needed. It
        never overflows.
    </p>
    <docs-resize>
        <div class="cluster box is-bordered">
            <div class="docs-box">One</div>
            <div class="docs-box">Two</div>
            <div class="docs-box">Three</div>
            <div class="docs-box">Four</div>
        </div>
    </docs-resize>

Between

Use .is-between to distribute items evenly across the cluster, with the first item flush with the start edge and the last item flush with the end edge.

Start

End

<h3>Between</h3>

    <p>
        Use <code>.is-between</code> to distribute items evenly across the cluster, with the first
        item flush with the start edge and the last item flush with the end edge.
    </p>
    <div class="cluster is-between box is-bordered">
        <div class="docs-box">Start</div>
        <div class="docs-box">End</div>
    </div>

End

Use .is-end to align items to the end edge of the cluster.

Right

Aligned

<h3>End</h3>

    <p>Use <code>.is-end</code> to align items to the end edge of the cluster.</p>
    <div class="cluster is-end box is-bordered">
        <div class="docs-box">Right</div>
        <div class="docs-box">Aligned</div>
    </div>

Around

Use .is-around to distribute items evenly across the cluster, with the first item flush with the start edge and the last item flush with the end edge.

Evenly

Distributed

Space

<h3>Around</h3>

    <p>
        Use <code>.is-around</code> to distribute items evenly across the cluster, with the first
        item flush with the start edge and the last item flush with the end edge.
    </p>
    <div class="cluster is-around box is-bordered">
        <div class="docs-box">Evenly</div>
        <div class="docs-box">Distributed</div>
        <div class="docs-box">Space</div>
    </div>

Spacing Variants and Utilities

Like the stack composition, cluster provides two common variants for adjusting spacing: .is-snug and .is-tight. As usual, if you need more, just add them to your own project's CSS. Any other step is already available through the gap utilities. This works, because they set the gap property directly, the @utilities layer overrides the composition layer, and gap does not inherit, so the change is scoped to this cluster alone.

is-snug

gap-lg

--cluster-gap: var(--space-xl)

<div class="stack is-snug">
            <div class="cluster gap-xs box is-bordered">
                <div class="docs-box">is-snug</div>
                <div class="docs-box">A</div>
                <div class="docs-box">B</div>
                <div class="docs-box">C</div>
            </div>

            <div class="cluster gap-lg box is-bordered">
                <div class="docs-box">gap-lg</div>
                <div class="docs-box">A</div>
                <div class="docs-box">B</div>
                <div class="docs-box">C</div>
            </div>

            <div class="cluster box is-bordered" style="--cluster-gap: var(--space-xl)">
                <div class="docs-box">--cluster-gap: var(--space-xl)</div>
                <div class="docs-box">A</div>
                <div class="docs-box">B</div>
                <div class="docs-box">C</div>
            </div>
        </div>

Navbar-like bookend

With three children, .is-between gives you logo, centered nav, actions. With two, it's a left/right split. With four or more, the middle items cluster in the center.

Logo

Home Products Pricing

<div
            class="cluster is-between"
            style="border: 1px dashed var(--color-border); padding: var(--space-sm)"
        >
            <strong>Logo</strong>
            <div class="cluster">
                <a class="nav-link" href="#">Home</a><a class="nav-link" href="#">Products</a
                ><a class="nav-link" href="#">Pricing</a>
            </div>
            <div class="cluster is-end">
                <button class="button is-sm" type="button">Sign in</button>
            </div>
        </div>

Reference

Source: src/css/composition.css

Applies to

.cluster

Classes

Class	Kind	Description
`.is-snug`	variant	A snug gap between cluster items
`.is-tight`	variant	A tight gap between cluster items
`.no-wrap`	opt-out	Prevent wrapping of cluster items
`.is-between`	variant	Space-between distribution with flex grow. Note that this uses flex: 1.
`.is-around`	variant	Space-evenly distribution with flex grow
`.is-center`	variant	Center-justified cluster items
`.is-end`	variant	End-justified cluster items

Tokens

Token	Default	Description
`--cluster-wrap`	`wrap`	Flex wrap behavior for the cluster
`--cluster-gap`	`var(--gutter-relaxed)`	Gap between cluster items
`--cluster-align`	`center`	Cross-axis alignment for cluster items