Card overview

NbCardComponent

Basic content container component.

Basic card example:

Basic card configuration:

<nb-card>
  <nb-card-body>
    Card
  </nb-card-body>
</nb-card>

Installation

Import NbCardModule to your feature module.

@NgModule({
  imports: [
    // ...
    NbCardModule,
  ],
})
export class PageModule { }

Usage

Card with header and footer:

Most of the time main card content goes to nb-card-body, so it is styled and aligned in accordance with the header and footer. In case you need a higher level of control, you can pass contend directly to nb-card, so nb-card-body styling will not be applied.

Consider an example with nb-list component:

Colored cards could be simply configured by providing a status property:

It is also possible to assign an accent property for a slight card highlight as well as combine it with status:

Cards of smaller sizes could be combined and put on the same row with a bigger card so they have the same heights.

NbCardHeaderComponent

Component intended to be used within the <nb-card> component. It adds styles for a preset header section.

NbCardBodyComponent

Component intended to be used within the <nb-card> component. Adds styles for a preset body section.

NbCardFooterComponent

Component intended to be used within the <nb-card> component. Adds styles for a preset footer section.