Components
Image Card
A card component optimized for displaying images with captions.
Preview
Usage
Import
import { NbImageCard, NbImageCardCaption, NbTitle } from '@ng-brutalism/ui';Template
<nb-image-card [image]="imageUrl" alt="A descriptive alt text">
<nb-image-card-caption>
Image caption
</nb-image-card-caption>
</nb-image-card>Image only
When nb-image-card-caption is omitted, the caption strip is not rendered.
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-image-card-bg | var(--nb-background) | Image card background |
| --nb-image-card-fg | var(--nb-foreground) | Image card text color |
| --nb-image-card-border | var(--nb-border) | Image card border and image divider color |
| --nb-image-card-radius | var(--nb-radius) | Image card corner radius |
| --nb-image-card-shadow | var(--nb-shadow-offset-x) var(--nb-shadow-offset-y) 0 var(--nb-shadow) | Image card 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 | Description |
|---|---|---|
| image | string (required) | URL of the image to render. |
| alt | string (required) | Alternative text for the image. |
Subcomponents
| Selector | Description |
|---|---|
| nb-image-card-caption | Projected caption region rendered below the image. |