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 type and size.

Examples

Card title

Card content

Basic card

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

import { Card } from 'antd';

ReactDOM.render(
  <Card title="Card title" extra={<a href="#">More</a>} style={{ width: 300 }}>
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
  </Card>
, mountNode);

Card title

Card content

No border

A borderless card on a gray background.

import { Card } from 'antd';

ReactDOM.render(
  <div style={{ background: '#ECECEC', padding: '30px' }}>
    <Card title="Card title" bordered={false} style={{ width: 300 }}>
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
    </Card>
  </div>
, mountNode);

Card content

Simple card

A simple card only containing a content area.

import { Card } from 'antd';

ReactDOM.render(
  <Card style={{ width: 300 }}>
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
  </Card>
, mountNode);

Europe Street beat

www.instagram.com

Customized content

Customizing default width and margin.

import { Card } from 'antd';

ReactDOM.render(
  <Card style={{ width: 240 }} bodyStyle={{ padding: 0 }}>
    <div className="custom-image">
      <img alt="example" width="100%" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
    </div>
    <div className="custom-card">
      <h3>Europe Street beat</h3>
      <p>www.instagram.com</p>
    </div>
  </Card>
, mountNode);
.custom-image img {
  display: block;
}
.custom-card {
  padding: 10px 16px;
}
.custom-card p {
  color: #999;
}

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.

import { Card, Col, Row } from 'antd';

ReactDOM.render(
  <div style={{ background: '#ECECEC', padding: '30px' }}>
    <Row gutter={16}>
      <Col span={8}>
        <Card title="Card title" bordered={false}>Card content</Card>
      </Col>
      <Col span={8}>
        <Card title="Card title" bordered={false}>Card content</Card>
      </Col>
      <Col span={8}>
        <Card title="Card title" bordered={false}>Card content</Card>
      </Col>
    </Row>
  </div>
, mountNode);

Card title

Loading card

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

import { Card } from 'antd';

ReactDOM.render(
  <Card loading title="Card title" style={{ width: '34%' }}>
    Whatever content
  </Card>
, mountNode);

卡片标题

卡片内容

Grid card

Grid style card content.

import { Card } from 'antd';

const gridStyle = {
  width: '25%',
  textAlign: 'center',
};

ReactDOM.render(
  <Card title="卡片标题" noHovering bodyStyle={{ padding: 0 }}>
    <Card.Grid style={gridStyle}>卡片内容</Card.Grid>
    <Card.Grid style={gridStyle}>卡片内容</Card.Grid>
    <Card.Grid style={gridStyle}>卡片内容</Card.Grid>
    <Card.Grid style={gridStyle}>卡片内容</Card.Grid>
    <Card.Grid style={gridStyle}>卡片内容</Card.Grid>
    <Card.Grid style={gridStyle}>卡片内容</Card.Grid>
    <Card.Grid style={gridStyle}>卡片内容</Card.Grid>
  </Card>
, mountNode);

API#

<Card title="Card title">Card content</Card>

Card#

Property	Description	Type	Default
title	Card title	string\|ReactNode	-
extra	Content to render in the top-right corner of the card	string\|ReactNode	-
bordered	Toggles rendering of the border around the card	boolean	true
bodyStyle	Inline style to apply to the card content	object	-
noHovering	Whether to be hovering when mouse over	boolean	true
loading	Shows a loading indicator while the contents of the card are being fetched	boolean	false

Card.Grid#

Property	Description	Type	Default
className	className of container	string	-
style	style object of container	object	-

Components

Card

When To Use#

Examples

Card title

Card title

Europe Street beat

Card title

Card title

Card title

Card title

卡片标题

API#

Card#

Card.Grid#