Neo-Brutalist Angular Text

Text

nbText is an attribute directive for general-purpose typography — body copy, labels, brand names, metadata, and captions. It composes cleanly with semantic HTML elements and other primitives without creating a wrapper element.

5Sizes
6Weights
10Tones
9Inputs
Source ↗Open Docs

Preview

Roam & Go

Explore iconic neighborhoods, savor local flavors, and make unforgettable memories on every trip.

New release

Usage

Add nbText to any inline or block element. It applies inline styles directly so it never conflicts with other attribute directives on the same element.

Import
import { NbText } from '@ng-brutalism/ui';
Template
<!-- Body text -->
<p nbText>
  Build loud interfaces with sharp Angular primitives.
</p>

<!-- Muted description with line-length cap -->
<p nbText tone="muted" measure="md">
  A token-driven neo-brutalist Angular UI library for expressive product interfaces.
</p>

<!-- Brand / name text -->
<span nbText size="xl" weight="extrabold">
  Roam &amp; Go
</span>

<!-- Metadata label -->
<span nbText size="sm" weight="bold" transform="uppercase" tracking="wide">
  New release
</span>

<!-- Long-form article text -->
<p nbText size="lg" leading="relaxed" measure="lg">
  Brutalist interfaces work best when layout, typography, and contrast are intentional.
</p>
Click 'Show more' to view additional details.

Sizes

xs The quick brown fox — 0.75rem / 12px
sm The quick brown fox — 0.875rem / 14px
md The quick brown fox — 1rem / 16px
lg The quick brown fox — 1.125rem / 18px
xl The quick brown fox — 1.25rem / 20px

Weights

normal Build loud. Stay sharp.
medium Build loud. Stay sharp.
semibold Build loud. Stay sharp.
bold Build loud. Stay sharp.
extrabold Build loud. Stay sharp.
black Build loud. Stay sharp.

Tones

Tones map to design tokens so they automatically adapt when the theme changes.

default Neo-Brutalism is intentional.
muted Neo-Brutalism is intentional.
subtle Neo-Brutalism is intentional.
inverse Neo-Brutalism is intentional.
primary Neo-Brutalism is intentional.
secondary Neo-Brutalism is intentional.
accent Neo-Brutalism is intentional.
danger Neo-Brutalism is intentional.
success Neo-Brutalism is intentional.
warning Neo-Brutalism is intentional.

Transform

none Flight Included — Tokyo City Escape
uppercase Flight Included — Tokyo City Escape
lowercase Flight Included — Tokyo City Escape
capitalize Flight Included — Tokyo City Escape

Tracking

Letter-spacing. Combine tracking="wide" with transform="uppercase" for classic brutalist labels.

tight New release
normal New release
wide New release
wider New release

Measure

measure caps max-width for readable line lengths. Use it on paragraph text so lines don't stretch too wide on large screens.

measure="none" — no cap

A token-driven neo-brutalist Angular UI library for expressive product interfaces. Build loud. Stay sharp.

measure="xs" — 20rem

A token-driven neo-brutalist Angular UI library for expressive product interfaces. Build loud. Stay sharp.

measure="sm" — 28rem

A token-driven neo-brutalist Angular UI library for expressive product interfaces. Build loud. Stay sharp.

measure="md" — 36rem

A token-driven neo-brutalist Angular UI library for expressive product interfaces. Build loud. Stay sharp.

measure="lg" — 44rem

A token-driven neo-brutalist Angular UI library for expressive product interfaces. Build loud. Stay sharp.

Leading

Controls line-height. By default, nbText picks a sensible line-height for the active size. Use leading="relaxed" for long-form reading.

leading="none" — 1

Brutalist interfaces work best when layout, typography, and contrast are intentional.

leading="tight" — 1.15

Brutalist interfaces work best when layout, typography, and contrast are intentional.

leading="normal" — size-matched

Brutalist interfaces work best when layout, typography, and contrast are intentional.

leading="relaxed" — 1.65

Brutalist interfaces work best when layout, typography, and contrast are intentional.

Underline

underline="bar" adds a built-in accent bar beneath the text — handy for brand names and section labels with no extra markup. Use "wave" for the squiggly variant. Recolor and resize it with the --nb-underline-color, --nb-underline-width, --nb-underline-height, --nb-underline-gap and --nb-underline-radius tokens.

Build Loud FM Stay Sharp Mint Accent

Composition

Because nbText is a directive it composes with other directives on the same element and works naturally inside any layout primitive.

Featured deal

Build loud.

A token-driven neo-brutalist Angular UI library for expressive product interfaces.

Flight included Hotel
From $799
per person

API

InputTypeDefaultDescription
size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'Font size (0.75 rem – 1.25 rem).
weight'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black''normal'Font weight (400 – 900).
tone'default' | 'muted' | 'subtle' | 'inverse' | 'primary' | 'secondary' | 'accent' | 'danger' | 'success' | 'warning''default'Text color mapped to a design token.
transform'none' | 'uppercase' | 'lowercase' | 'capitalize''none'CSS text-transform.
tracking'tight' | 'normal' | 'wide' | 'wider''normal'Letter-spacing (−0.025 em – 0.05 em).
measure'none' | 'xs' | 'sm' | 'md' | 'lg''none'max-width cap for readable line lengths (20 rem – 44 rem).
leading'none' | 'tight' | 'normal' | 'relaxed''normal'Line-height override. Defaults to a size-matched value.
underline'none' | 'bar' | 'wave''none'Built-in accent underline beneath the text. Style it with the --nb-underline-* tokens.
resetbooleantrueSets margin to 0, removing browser paragraph/heading margins so layout primitives own all spacing.