Components
Avatar
A circular image frame with a thick border and offset shadow. Falls back to projected initials when no image source is provided.
IMGor Text
Preview
Usage
Import
import { NbAvatar } from '@ng-brutalism/ui';Template
<nb-avatar class="h-20 w-20" src="https://github.com/khangtrannn.png" alt="khangtrannn" />Fallback (Initials)
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-avatar-bg | var(--nb-secondary-background) | Fallback background |
| --nb-avatar-fg | var(--nb-foreground) | Fallback text color |
| --nb-avatar-border | var(--nb-border) | Avatar border color |
| --nb-avatar-radius | 9999px | Avatar corner radius |
| --nb-avatar-shadow | 2px 2px 0 0 var(--nb-shadow) | Avatar box shadow |
| --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 |
|---|---|---|
| src | string | undefined | undefined |
| alt | string | '' |