Neo-Brutalist Angular Display
Display
A directive for mega-sized display text. Apply it to any element — a heading, a span, a stat — to get ultra-bold, tight-leading display typography. It's purely presentational, so keep your semantics correct and let the directive handle the look.
Preview
SENIOR ANGULAR ENGINEER
Usage
import { NbDisplay } from '@ng-brutalism/ui';<h2 nbDisplay class="uppercase">SENIOR ANGULAR ENGINEER</h2>Sizes
size="sm" — 2rem
PRO PLAN
size="md" — 3rem
INDIE CUP
size="lg" — 3.75rem
NORA CHEN
size="xl" — 5rem
GO
Custom Size
Override --nb-display-size inline for any arbitrary value outside the 4 presets.
$29/mo
Any Element
nbDisplay is presentational — apply it to a span, div, or anything else when display type isn't a heading (stats, prices, badges). Pick the element for its semantics, not its size.
Underline
underline="bar" draws a built-in accent bar beneath the text — no extra markup. Use "wave" for the squiggly variant. The bar is decorative (rendered as a pseudo-element, kept out of the accessibility tree). Tune it with the --nb-underline-* tokens below.
SHIP IT
STAY SHARP
FULL WIDTH
Customization
Override these CSS variables on :root, a wrapper, or the component element. More local values win, so per-instance styling can sit directly on the element.
| Token | Default | Used for |
|---|---|---|
| --nb-display-size | set by size input | Font size. Overrides the size preset when set inline. |
| --nb-display-color | currentColor | Text color. Inherits from the parent by default. |
| --nb-underline-color | var(--nb-pink) | Accent underline color when underline="bar" | "wave". |
| --nb-underline-width | 7rem (bar) | Accent underline width. |
| --nb-underline-height | 0.375rem (bar) | Accent underline thickness. |
| --nb-underline-gap | 0.75rem (bar) | Space between the text and the accent underline. |
| --nb-underline-radius | 9999px | Accent underline corner radius (bar shape only). |
| --nb-border | #000000 | Border color and focus ring color |
| --nb-shadow | #000000 | Offset shadow color |
| --nb-radius | 0rem | Corner radius through the rounded-nb utility |
| --nb-shadow-offset-x | 4px | Horizontal shadow and press offset |
| --nb-shadow-offset-y | 4px | Vertical shadow and press offset |
| --nb-foreground | #000000 | Default foreground text color |
| --nb-background | #ffffff | Default surface background color |
API
| Input | Type | Default | Description |
|---|---|---|---|
| size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Controls font size via --nb-display-size. |
| underline | 'none' | 'bar' | 'wave' | 'none' | Draws a built-in accent underline beneath the text. Style it with the --nb-underline-* tokens. |