Cluster

A flexbox row that wraps its children with a consistent gap. Use it for button groups, tag lists, meta lines, and toolbars.

Default cluster

<div class="ln-cluster">
  <span class="bg-surface-raised rounded-sm p-1 px-2">Design</span>
  <span class="bg-surface-raised rounded-sm p-1 px-2">Tokens</span>
  <span class="bg-surface-raised rounded-sm p-1 px-2">Vertical Rhythm</span>
  <span class="bg-surface-raised rounded-sm p-1 px-2">SCSS</span>
  <span class="bg-surface-raised rounded-sm p-1 px-2">BEM</span>
</div>

DesignTokensVertical RhythmSCSSBEM

Justify and alignment modifiers

<!-- Space between -->
<div class="ln-cluster ln-cluster--gap-md ln-cluster--justify-between mb-3">
  <span class="bg-surface-raised rounded-sm p-1 px-2">Left item</span>
  <span class="bg-surface-raised rounded-sm p-1 px-2">Right item</span>
</div>

<!-- Center-aligned -->
<div class="ln-cluster ln-cluster--nowrap ln-cluster--align-center">
  <strong>Title</strong>
  <span class="text-muted text-body-sm">Centered subtitle</span>
</div>

Left itemRight item

TitleCentered subtitle

Responsive layout

Justify, align, and nowrap modifiers accept a @{breakpoint} suffix for responsive behaviour.

<!-- Centred on mobile, space-between from md up -->
<div class="ln-cluster ln-cluster--gap-md ln-cluster--justify-center ln-cluster--justify-between@md border p-2 mb-3">
  <span class="bg-surface-raised rounded-sm p-1 px-2">Left</span>
  <span class="bg-surface-raised rounded-sm p-1 px-2">Right</span>
</div>

<!-- Wraps on mobile, nowrap from lg up -->
<div class="ln-cluster ln-cluster--gap-sm ln-cluster--nowrap@lg border p-2">
  <span class="bg-surface-raised rounded-sm p-1 px-2">One</span>
  <span class="bg-surface-raised rounded-sm p-1 px-2">Two</span>
  <span class="bg-surface-raised rounded-sm p-1 px-2">Three</span>
  <span class="bg-surface-raised rounded-sm p-1 px-2">Four</span>
  <span class="bg-surface-raised rounded-sm p-1 px-2">Five</span>
</div>

LeftRight

OneTwoThreeFourFive

Reference

Class	Description	Responsive
`.ln-cluster`	Flex row with wrap and default 8px gap	No
`.ln-cluster--gap-xs`	8px gap	No
`.ln-cluster--gap-sm`	16px gap	No
`.ln-cluster--gap-md`	24px gap	No
`.ln-cluster--justify-start`	Justify items to start	Yes
`.ln-cluster--justify-center`	Justify items to centre	Yes
`.ln-cluster--justify-end`	Justify items to end	Yes
`.ln-cluster--justify-between`	Space between items	Yes
`.ln-cluster--align-start`	Align items to start	Yes
`.ln-cluster--align-center`	Align items to centre	Yes
`.ln-cluster--align-baseline`	Align items to baseline	Yes
`.ln-cluster--align-end`	Align items to end	Yes
`.ln-cluster--nowrap`	Prevent wrapping	Yes