Card

Simple rectangular container.

When To Use#

A card can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes.

Import this Component Individually#

You can get more detail here.

import { NzCardModule } from 'ng-zorro-antd/card';

Examples

Card title

Card content

Card content

Card content

A basic card containing a title, content and an extra corner content.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-card-basic',
  template: `
    <nz-card style="width:300px;" nzTitle="Card title" [nzExtra]="extraTemplate">
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
    </nz-card>
    <ng-template #extraTemplate>
      <a>More</a>
    </ng-template>
  `,
  styles: [
    `
      p {
        margin: 0;
      }
    `
  ]
})
export class NzDemoCardBasicComponent {}
Card title

Card content

Card content

Card content

A borderless card on a gray background.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-card-border-less',
  template: `
    <div style="background: #ECECEC;padding:30px;">
      <nz-card style="width:300px;" [nzBordered]="false" nzTitle="Card title" [nzExtra]="extraTemplate">
        <p>Card content</p>
        <p>Card content</p>
        <p>Card content</p>
      </nz-card>
    </div>
    <ng-template #extraTemplate>
      <a>More</a>
    </ng-template>
  `,
  styles: [
    `
      p {
        margin: 0;
      }
    `
  ]
})
export class NzDemoCardBorderLessComponent {}

Card content

Card content

Card content

A simple card only containing a content area.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-card-simple',
  template: `
    <nz-card style="width:300px;">
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
    </nz-card>
  `,
  styles: [
    `
      p {
        margin: 0;
      }
    `
  ]
})
export class NzDemoCardSimpleComponent {}
example
Europe Street beat
www.instagram.com

You can use nz-card-meta to support more flexible content.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-card-flexible-content',
  template: `
    <nz-card nzHoverable style="width:240px" [nzCover]="coverTemplate">
      <nz-card-meta nzTitle="Europe Street beat" nzDescription="www.instagram.com"></nz-card-meta>
    </nz-card>
    <ng-template #coverTemplate>
      <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
    </ng-template>
  `
})
export class NzDemoCardFlexibleContentComponent {}
Card title

Card content

Card title

Card content

Card title

Card content

Cards usually cooperate with grid column layout in overview page.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-card-in-column',
  template: `
    <div style="background: #ECECEC;padding:30px;">
      <div nz-row [nzGutter]="8">
        <div nz-col [nzSpan]="8">
          <nz-card nzTitle="Card title">
            <p>Card content</p>
          </nz-card>
        </div>
        <div nz-col [nzSpan]="8">
          <nz-card nzTitle="Card title">
            <p>Card content</p>
          </nz-card>
        </div>
        <div nz-col [nzSpan]="8">
          <nz-card nzTitle="Card title">
            <p>Card content</p>
          </nz-card>
        </div>
      </div>
    </div>
  `,
  styles: [
    `
      p {
        margin: 0;
      }
    `
  ]
})
export class NzDemoCardInColumnComponent {}

Shows a loading indicator while the contents of the card is being fetched.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-card-loading',
  template: `
    <nz-switch [(ngModel)]="loading"></nz-switch>
    <nz-card style="width: 300px;margin-top: 16px" [nzLoading]="loading">
      <nz-card-meta
        [nzAvatar]="avatarTemplate"
        nzTitle="Card title"
        nzDescription="This is the description"
      ></nz-card-meta>
    </nz-card>
    <nz-card style="width: 300px;margin-top: 16px" [nzActions]="[actionSetting, actionEdit, actionEllipsis]">
      <nz-skeleton [nzActive]="true" [nzLoading]="loading" [nzAvatar]="{ size: 'large' }">
        <nz-card-meta
          [nzAvatar]="avatarTemplate"
          nzTitle="Card title"
          nzDescription="This is the description"
        ></nz-card-meta>
      </nz-skeleton>
    </nz-card>
    <ng-template #avatarTemplate>
      <nz-avatar nzSrc="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></nz-avatar>
    </ng-template>
    <ng-template #actionSetting>
      <i nz-icon nzType="setting"></i>
    </ng-template>
    <ng-template #actionEdit>
      <i nz-icon nzType="edit"></i>
    </ng-template>
    <ng-template #actionEllipsis>
      <i nz-icon nzType="ellipsis"></i>
    </ng-template>
  `
})
export class NzDemoCardLoadingComponent {
  loading = true;
}
Cart Title
Content
Content
Content
Content
Content
Content
Content

Grid style card content.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-card-grid-card',
  template: `
    <nz-card nzTitle="Cart Title">
      <div nz-card-grid [ngStyle]="gridStyle">Content</div>
      <div nz-card-grid [ngStyle]="gridStyle">Content</div>
      <div nz-card-grid [ngStyle]="gridStyle">Content</div>
      <div nz-card-grid [ngStyle]="gridStyle">Content</div>
      <div nz-card-grid [ngStyle]="gridStyle">Content</div>
      <div nz-card-grid [ngStyle]="gridStyle">Content</div>
      <div nz-card-grid [ngStyle]="gridStyle">Content</div>
    </nz-card>
  `
})
export class NzDemoCardGridCardComponent {
  gridStyle = {
    width: '25%',
    textAlign: 'center'
  };
}
Card Title

Group title

Inner Card Title
Inner Card Title

It can be placed inside the ordinary card to display the information of the multilevel structure.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-card-inner',
  template: `
    <nz-card nzTitle="Card Title">
      <p style="font-size:14px;color:rgba(0, 0, 0, 0.85);margin-bottom:16px;font-weight: 500;">
        Group title
      </p>
      <nz-card nzType="inner" nzTitle="Inner Card Title" [nzExtra]="extraTemplate">
        <a>Inner Card Content</a>
      </nz-card>
      <nz-card nzType="inner" style="margin-top:16px;" nzTitle="Inner Card Title" [nzExtra]="extraTemplate">
        <a>Inner Card Content</a>
      </nz-card>
    </nz-card>
    <ng-template #extraTemplate>
      <a>More</a>
    </ng-template>
  `
})
export class NzDemoCardInnerComponent {}
Card title
content0


content0

More content can be hosted.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-card-tabs',
  template: `
    <nz-card style="width: 100%;" nzTitle="Card title" [nzExtra]="extraTemplate">
      <nz-card-tab>
        <nz-tabset nzSize="large" [(nzSelectedIndex)]="index1">
          <nz-tab nzTitle="tab1"></nz-tab>
          <nz-tab nzTitle="tab2"></nz-tab>
        </nz-tabset>
      </nz-card-tab>
      content{{ index1 }}
    </nz-card>
    <ng-template #extraTemplate>
      <a>More</a>
    </ng-template>
    <br />
    <br />
    <nz-card style="width: 100%;">
      <nz-card-tab>
        <nz-tabset nzSize="large" [(nzSelectedIndex)]="index2">
          <nz-tab nzTitle="article"></nz-tab>
          <nz-tab nzTitle="app"></nz-tab>
          <nz-tab nzTitle="project"></nz-tab>
        </nz-tabset>
      </nz-card-tab>
      content{{ index2 }}
    </nz-card>
  `
})
export class NzDemoCardTabsComponent {
  index1 = 0;
  index2 = 0;
}
example
Card title
This is the description

A Card that supports cover, avatar, title and description.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-card-meta',
  template: `
    <nz-card style="width:300px;" [nzCover]="coverTemplate" [nzActions]="[actionSetting, actionEdit, actionEllipsis]">
      <nz-card-meta
        nzTitle="Card title"
        nzDescription="This is the description"
        [nzAvatar]="avatarTemplate"
      ></nz-card-meta>
    </nz-card>
    <ng-template #avatarTemplate>
      <nz-avatar nzSrc="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></nz-avatar>
    </ng-template>
    <ng-template #coverTemplate>
      <img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />
    </ng-template>
    <ng-template #actionSetting>
      <i nz-icon nzType="setting"></i>
    </ng-template>
    <ng-template #actionEdit>
      <i nz-icon nzType="edit"></i>
    </ng-template>
    <ng-template #actionEllipsis>
      <i nz-icon nzType="ellipsis"></i>
    </ng-template>
  `
})
export class NzDemoCardMetaComponent {}

API#

<nz-card nzTitle="卡片标题">卡片内容</nz-card>

nz-card#

PropertyDescriptionTypeDefault
[nzActions]The action list, shows at the bottom of the Card.Array<TemplateRef<void>>-
[nzBodyStyle]Inline style to apply to the card content{ [key: string]: string }-
[nzBordered]Toggles rendering of the border around the cardbooleantrue
[nzCover]Card coverTemplateRef<void>-
[nzExtra]Content to render in the top-right corner of the cardstring | TemplateRef<void>-
[nzHoverable]Lift up when hovering cardbooleanfalse
[nzLoading]Shows a loading indicator while the contents of the card are being fetchedbooleanfalse
[nzTitle]Card titlestring | TemplateRef<void>-
[nzType]Card style type, can be set to inner or not set'inner'-
[nzSize]Size of card'default' | 'small''default'

nz-card-meta#

PropertyDescriptionTypeDefault
[nzAvatar]avatar or iconTemplateRef<void>-
[nzDescription]description contentstring | TemplateRef<void>-
[nzTitle]title contentstring | TemplateRef<void>-

[nz-card-grid]#

Area for grid style card

nz-card-tab#

Area for tab card