Flip Card overview

NbFlipCardComponent

Flip card example:

As a content Flip card accepts two instances of nb-card - for front and back sides.

Basic flip card configuration:

<nb-flip-card>
  <nb-card-front>
    <nb-card>
      <nb-card-body>
        Front
      </nb-card-body>
    </nb-card>
  </nb-card-front>
  <nb-card-back>
    <nb-card>
      <nb-card-body>
        Back
      </nb-card-body>
    </nb-card>
  </nb-card-back>
</nb-flip-card>

Installation

Import NbCardModule to your feature module.

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

Usage

Flip Card with header and footer:

Colored flip-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:

NbCardFrontComponent

Component intended to be used within the <nb-flip-card> and <nb-reveal-card> components.

Use it as a container for the front card.

NbCardBackComponent

Component intended to be used within the <nb-flip-card> and <nb-reveal-card> components.

Use it as a container for the back card.