Neo-Brutalist Angular Callout
Callout
A high-emphasis directive for important values. Use nbCallout for prices, stats, dates, awards, ratings, totals, and other compact pieces of information that need the loud brutalist treatment without domain-specific API.
Preview
$799
Usage
Add nbCallout to the element that owns the emphasized value. Compose icons, labels, dividers, and secondary text inside the host with normal template markup.
Import
import { NbCallout, NbSeparator } from '@ng-brutalism/ui';Template
<div nbCallout tone="yellow" size="xl">
$799
</div>Examples
$799
$420K
4.9
842 REVIEWS
842 REVIEWS
TODAY3:30 PM
Tones
yellow$799
pink$420K
mint4.9
lavenderEP 42
blue3:30
cream$129
white$8.2K
black$5K
primaryNEW
secondarySAVE
accentHOT
successDONE
warningTODAY
dangerLIVE
Sizes
SM $129
MD 4.9
LG $420K
XL $799
Layouts
InlineEP 42
BetweenEP 42
CenterEP 42
Shadows
None
Default
Hard
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-callout-bg | #ffd84d | Callout background color. Reassigned by the tone input. |
| --nb-callout-fg | #000000 | Callout text color. Reassigned by the tone input. |
| --nb-callout-border-width | 3px | Callout border width. Reassigned by the size input. |
| --nb-callout-radius | 0.75rem | Callout corner radius. Reassigned by the size input. |
| --nb-callout-shadow | 6px 6px 0 0 var(--nb-shadow) | Callout box shadow. Reassigned by the shadow input. |
| --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 |
|---|---|---|---|
| tone | 'yellow' | 'pink' | 'mint' | 'lavender' | 'blue' | 'cream' | 'white' | 'black' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger' | 'yellow' | Background and foreground color pair. |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'lg' | Height, padding, type size, radius, and border weight preset. |
| layout | 'inline' | 'between' | 'center' | 'inline' | Horizontal alignment for the callout content. |
| shadow | 'none' | 'default' | 'hard' | 'hard' | Offset shadow preset. |
| radius | 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | — | Corner radius override. Defaults to the size-derived radius when unset. |