Cluster

Lays its children out in a row that wraps, keeping one gap between them on both axes.

Example

View Code 
<nav class="cluster" data-gap="sm" data-justify="between" aria-label="Site">
    <a href="#">Home</a>
    <a href="#">Docs</a>
    <a href="#">Blog</a>
    <a href="#">Contact</a>
</nav>

When to use it

Use a cluster for a row of things that are sized by their content and may need to wrap: tags, buttons, navigation links, a logo beside a menu. When it wraps, the gap holds between rows as well as between items, so nothing needs a margin.

How it works

A cluster is a wrapping flex row with a gap. data-justify distributes the items along the row, so between pushes the first and last to the edges, and data-align lines them up vertically within a row. Items keep their own width; a cluster never stretches them.

<ul class="cluster" data-gap="xs" role="list">
    <li>css</li>
    <li>layout</li>
    <li>intrinsic</li>
</ul>

Why this name

The word is exact: items gather, they do not line up in columns. Foundation 6 reached for .button-group or a menu for the same job.

Attributes

Attribute Type Values Default Description
data-gap enum none, xs, sm, md, lg, xl, 2xl, 3xl, xs-sm, xs-md, xs-lg, xs-xl, xs-2xl, xs-3xl, sm-md, sm-lg, sm-xl, sm-2xl, sm-3xl, md-lg, md-xl, md-2xl, md-3xl, lg-xl, lg-2xl, lg-3xl, xl-2xl, xl-3xl, 2xl-3xl md Space between items, horizontally and between wrapped rows.
data-align enum start, center, end, stretch, baseline center Vertical alignment of items within a row.
data-justify enum start, center, end, between, around, evenly start How items are distributed along the row.

Children

  • > *: at least 1. Anything sized by its content: tags, buttons, links, a logo and a nav.

Tokens

Token Description
--yeti-space-md The default gap.
Internal tokens (may change between minor versions) - `--_yeti-gap` - `--_yeti-align` - `--_yeti-justify`

Accessibility

  • Purely visual. Use a list element when the items are a list.

Browser support

  • Used without guards: flexbox gap
  • Behind @supports: nothing

JavaScript

None. This component is CSS only.

Available since 7.0.0.