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

Card content

Card content

Card content

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

expand codeexpand code
      Loading...
    
Card title

Card content

Card content

Card content

A borderless card on a gray background.

expand codeexpand code
      Loading...
    

Card content

Card content

Card content

A simple card only containing a content area.

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

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

Cards usually cooperate with grid column layout in overview page.

expand codeexpand code
      Loading...
    

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 style card content.

expand codeexpand code
      Loading...
    
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
      Loading...
    
Card title
content0


content0

More content can be hosted.

expand codeexpand code
      Loading...
    
example
Card title
This is the description

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 }-
[nzBorderless]Remove border around the cardbooleanfalse
[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