Neo-Brutalist Angular Stack

Stack

Use nbStack whenever children should flow vertically with consistent spacing. It turns raw flex flex-col gap-* layout boilerplate into a small declarative primitive for vertical rhythm.

7Gaps
4Alignments
3Separators
Source ↗Open Docs

Preview

Build loud.

Stack gives you brutalist vertical rhythm without repeating flex and gap classes everywhere.

Usage

Add nbStack to the parent that owns the vertical flow. Use gap for rhythm, align for cross-axis alignment, and justify when the stack has a fixed height.

Import
import { NbStack } from '@ng-brutalism/ui';
Template
<div nbStack gap="lg">
  <h2 nbDisplay>Build loud.</h2>

  <p>
    Stack gives you brutalist vertical rhythm without repeating flex and gap
    classes everywhere.
  </p>

  <button nbButton>Stay sharp</button>
</div>

Gaps

none
xs
sm
md
lg
xl
2xl

Alignment

stretchAB
startAB
centerAB
endAB

Justification

startOneTwo
centerOneTwo
endOneTwo
betweenOneTwo

Separators

Use separator for simple separated lists. The separator padding follows the stack gap.

Central Locations
Guided Experiences
24/7 Support
Central Locations
Guided Experiences
24/7 Support

Responsive Gap

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

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

API

Input Type Default Description
gap 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' 'md' Vertical spacing between stack children.
align 'stretch' | 'start' | 'center' | 'end' 'stretch' Cross-axis alignment for the stack children.
justify 'start' | 'center' | 'end' | 'between' 'start' Main-axis distribution when the stack has extra height.
separator 'none' | 'solid' | 'dashed' | 'thick' 'none' Optional border between adjacent children.