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 { NzCardModule } from 'ng-zorro-antd/card';

Examples

Card title
More

Card content

Card content

Card content

Basic card

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

expand codeexpand code
      Loading...
Card title
More

Card content

Card content

Card content

No border

A borderless card on a gray background.

expand codeexpand code
      Loading...

Card content

Card content

Card content

Simple card

A simple card only containing a content area.

expand codeexpand code
      Loading...
example
Europe Street beat
www.instagram.com
Customized content

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

expand codeexpand code
      Loading...
Card title

Card content

Card title

Card content

Card title

Card content

Card in column

Cards usually cooperate with grid column layout in overview page.

expand codeexpand code
      Loading...

Loading card

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

expand codeexpand code
      Loading...
Cart Title
Content
Content
Content
Content
Content
Content
Content
Grid card

Grid style card content.

expand codeexpand code
      Loading...
Card Title

Group title

Inner Card Title
More
Inner Card Content
Inner Card Title
More
Inner Card Content
Inner card

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

expand codeexpand code
      Loading...
Card title
More
content0


content0
With tabs

More content can be hosted.

expand codeexpand code
      Loading...
example
Card title
This is the description
Support more content configuration

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

expand codeexpand code
      Loading...

API#

<nz-card nzTitle="card title">card content</nz-card>

nz-card#

PropertyDescriptionTypeDefaultGlobal Config
[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]#

PropertyDescriptionTypeDefaultGlobal Config
[nzHoverable]Lift up when hovering cardbooleantrue-

Area for grid style card

nz-card-tab#

Area for tab card