Neo-Brutalist Angular Cluster

Cluster

Use nbCluster whenever children should flow horizontally, align together, and wrap cleanly on smaller screens. It is the inline composition pair to nbStack.

7Gaps
5Alignments
WrapDefault
4Separators
Source ↗Open Docs

Preview

NB
LogoActionsBadges

Cluster loud.

Inline rhythm for logos, actions, badges, and feature rows.

Usage

Add nbCluster to the parent that owns the inline group. Use gap for spacing, align for cross-axis alignment, justify for distribution, and wrap when a row should stay on one line.

Import
import { NbCluster } from '@ng-brutalism/ui';
Template
<div nbCluster gap="2xl" align="center" justify="center">
  <div>
    <div>NB</div>
    <button nbButton size="lg">Ship it</button>
  </div>

  <div>
    <div nbCluster gap="sm" justify="center">
      <span>Logo</span>
      <span>Actions</span>
      <span>Badges</span>
    </div>

    <h2 nbDisplay>Cluster loud.</h2>
    <p>Inline rhythm for logos, actions, badges, and feature rows.</p>
  </div>
</div>

Gaps

none
xs
sm
md
lg
xl
2xl

Alignment

start
SmallTall
center
SmallTall
end
SmallTall
baseline
SmallTall
stretch
SmallTall

Justification

start
OneTwo
center
OneTwo
end
OneTwo
between
OneTwo

Wrapping

Cluster wraps by default so chunky buttons, chips, badges, and media items can survive narrow layouts. Switch to wrap="nowrap" for compact controls that must stay in a single row.

wrap
nowrap

Separators

Use separator to render inline separators between cluster children. When a separator is active, gap is collapsed to gap-x-0 and children split --nb-cluster-gap across separator margin and padding.

Separator note: cluster separators are best for compact, single-row groups like actions, badges, or metadata. When content wraps across rows, CSS cannot reliably detect the first item of each visual row, so a separator may appear at the start of a wrapped line. For heavily wrapping content, prefer separator="none" or switch to nbStack.

separator="solid"

Central
Locations
Guided
Experiences
24/7
Support

separator="dashed"

Central
Locations
Guided
Experiences
24/7
Support

separator="thick"

Central
Locations
Guided
Experiences
24/7
Support

Composition

Central
Locations
Guided
Experiences
24/7
Support

Responsive Gap

Cluster keeps the API focused. For breakpoint changes, override the CSS variable with Tailwind arbitrary properties.

Code
<div
  nbCluster
  gap="md"
  class="md:[--nb-cluster-gap:1.5rem]"
>
  ...
</div>

API

Input Type Default Description
gap 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' 'md' Horizontal and wrapped-row spacing between cluster children.
padding 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' 'none' Uniform inner padding around the cluster's children.
align 'start' | 'center' | 'end' | 'baseline' | 'stretch' 'center' Cross-axis alignment for the inline group.
justify 'start' | 'center' | 'end' | 'between' 'start' Main-axis distribution when the cluster has extra width.
wrap 'wrap' | 'nowrap' 'wrap' Controls whether children can wrap onto additional rows.
separator 'none' | 'solid' | 'dashed' | 'thick' 'none' Inline-start border between each child. When active, gap-x is collapsed and spacing is split across separator margin and padding.