Composition
Common Patterns
Copy-pasteable composition patterns built from ng-brutalism primitives. Each pattern shows the rendered output and the template — adjust tones, radii, and gaps to fit your context.
Brutalist card shell
The fundamental pattern: Surface wraps, Sections divide, Stack and Cluster handle layout within each region.
Card title
Card content goes here. Use Stack to control rhythm and Cluster to group inline items.
Toolbar row
A heading and action group pushed apart. Use this inside a Surface section header or as a standalone toolbar.
Components
Feature card stack
Three loud feature cards in a Cluster that wraps on smaller screens. Each card is a Surface with Stack content.
Angular native
Directive APIs, signal inputs.
Loud by default
Chunky borders, punchy color.
Token driven
CSS variables keep overrides local.
Callout panel
Combine nbCallout inside a Surface for an eye-catching notice or price highlight.
Pricing
Everything included. No usage limits. Cancel any time.
Two-column card
A Surface with Split inside — the simplest media/content or stat/description pattern.
Components shipped
Fully composed, keyboard-ready, token-driven.
Primitives used panel
A reusable panel for documenting which primitives a recipe or component relies on.