Components
Title
Adds a brutal wave underline to headings without changing the heading level or document structure.
Preview
Brutal section title
Usage
Import
import { NbTitle } from '@ng-brutalism/ui';Template
<h2 nbTitle class="font-mono text-4xl font-black leading-tight uppercase">
Brutal section title
</h2>Custom Wave
Sharp editorial heading
Mixed Content
Release notes
Fast primitives, loud defaults
Use it with your own typography classes, then tune the underline with CSS variables when a title needs more attitude.
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-title-wave-width | min(18rem, 100%) | Underline width |
| --nb-title-wave-height | 0.625rem | Underline height |
| --nb-title-wave-gap | 0 | Space between title text and underline |
| --nb-title-wave-color | #a78bfa | Underline color |
| --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
| Selector | Description |
|---|---|
| [nbTitle] | Applies data-nb-title and draws a configurable wave underline with a CSS pseudo element. |