Components

Card

Displays a card with header, content, and footer.

7Parts

SLOTComposable

∞Layouts

Source ↗Open Docs

Preview

The live demo is a styled composition showcase. The Code tab below shows the underlying card primitive usage; see the example source for the full implementation.

Senior Frontend
Engineer

Inspectorio

Build delightful UI systems and scalable web experiences.

Highlights

Angular +
TypeScriptDesign
systemInternational
team

Ho Chi Minh City / Remote

Posted 2 days ago

Usage

Import

import {
  NbCard,
  NbCardHeader,
  NbCardTitle,
  NbCardDescription,
  NbCardActions,
  NbCardContent,
  NbCardFooter,
} from '@ng-brutalism/ui';

Template

<nb-card>
  <nb-card-header>
    <nb-card-title>Card Title</nb-card-title>
    <nb-card-description>Card Description</nb-card-description>
  </nb-card-header>
  <nb-card-content>
    <p>Card Content</p>
  </nb-card-content>
  <nb-card-actions>
    <button nbButton>Action</button>
  </nb-card-actions>
</nb-card>

Sub-parts

The card component is composed of 7 sub-parts that can be used independently.

Selector	Description
nb-card	Root container with border, shadow, and background
nb-card-header	Top section for title and description content
nb-card-title	Heading text inside the header
nb-card-description	Subtitle or description text inside the header
nb-card-actions	Action row for one or more card-level commands
nb-card-content	Main body area
nb-card-footer	Bottom section for metadata, summaries, and supporting layout

Actions

Use <nb-card-actions> for card-level commands. It can sit directly under the card or inside the footer when the footer also contains supporting metadata.

Notifications

You have 3 unread messages.

Check your inbox for the latest updates from your team.

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-card-bg	var(--nb-background)	Card background
--nb-card-fg	var(--nb-foreground)	Card text color
--nb-card-border	var(--nb-border)	Card border color
--nb-card-radius	18px	Card corner radius
--nb-card-shadow	var(--nb-shadow-offset-x) var(--nb-shadow-offset-y) 0 var(--nb-shadow)	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