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.

Examples

Default size card

Card content

Card content

Card content

Small size card

Card content

Card content

Card content

A basic card containing a title, content and an extra corner content. Supports two sizes: default and small.

expand codeexpand code
import { Card } from 'antd';

ReactDOM.render(
  <>
    <Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
    </Card>
    <Card size="small" title="Small size card" 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

Card content

Card content

A borderless card on a gray background.

expand codeexpand code
import { Card } from 'antd';

ReactDOM.render(
  <div className="site-card-border-less-wrapper">
    <Card title="Card title" bordered={false} style={{ width: 300 }}>
      <p>Card content</p>
      <p>Card content</p>
      <p>Card content</p>
    </Card>
  </div>,
  mountNode,
);
.site-card-border-less-wrapper {
  padding: 30px;
  background: #ececec;
}

Card content

Card content

Card content

A simple card only containing a content area.

expand codeexpand code
import { Card } from 'antd';

ReactDOM.render(
  <Card style={{ width: 300 }}>
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
  </Card>,
  mountNode,
);
example
Europe Street beat
www.instagram.com

You can use Card.Meta to support more flexible content.

expand codeexpand code
import { Card } from 'antd';

const { Meta } = Card;

ReactDOM.render(
  <Card
    hoverable
    style={{ width: 240 }}
    cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
  >
    <Meta title="Europe Street beat" description="www.instagram.com" />
  </Card>,
  mountNode,
);
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 { Card, Col, Row } from 'antd';

ReactDOM.render(
  <div className="site-card-wrapper">
    <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,
);

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

expand codeexpand code
import { Skeleton, Switch, Card, Avatar } from 'antd';
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';

const { Meta } = Card;

class App extends React.Component {
  state = {
    loading: true,
  };

  onChange = checked => {
    this.setState({ loading: !checked });
  };

  render() {
    const { loading } = this.state;

    return (
      <>
        <Switch checked={!loading} onChange={this.onChange} />

        <Card style={{ width: 300, marginTop: 16 }} loading={loading}>
          <Meta
            avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
            title="Card title"
            description="This is the description"
          />
        </Card>

        <Card
          style={{ width: 300, marginTop: 16 }}
          actions={[
            <SettingOutlined key="setting" />,
            <EditOutlined key="edit" />,
            <EllipsisOutlined key="ellipsis" />,
          ]}
        >
          <Skeleton loading={loading} avatar active>
            <Meta
              avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
              title="Card title"
              description="This is the description"
            />
          </Skeleton>
        </Card>
      </>
    );
  }
}

ReactDOM.render(<App />, mountNode);
Card Title
Content
Content
Content
Content
Content
Content
Content

Grid style card content.

expand codeexpand code
import { Card } from 'antd';

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

ReactDOM.render(
  <Card title="Card Title">
    <Card.Grid style={gridStyle}>Content</Card.Grid>
    <Card.Grid hoverable={false} style={gridStyle}>
      Content
    </Card.Grid>
    <Card.Grid style={gridStyle}>Content</Card.Grid>
    <Card.Grid style={gridStyle}>Content</Card.Grid>
    <Card.Grid style={gridStyle}>Content</Card.Grid>
    <Card.Grid style={gridStyle}>Content</Card.Grid>
    <Card.Grid style={gridStyle}>Content</Card.Grid>
  </Card>,
  mountNode,
);
Card title
Inner Card title
Inner Card content
Inner Card title
Inner Card content

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

expand codeexpand code
import { Card } from 'antd';

ReactDOM.render(
  <Card title="Card title">
    <Card type="inner" title="Inner Card title" extra={<a href="#">More</a>}>
      Inner Card content
    </Card>
    <Card
      style={{ marginTop: 16 }}
      type="inner"
      title="Inner Card title"
      extra={<a href="#">More</a>}
    >
      Inner Card content
    </Card>
  </Card>,
  mountNode,
);
Card title

content1



app content

More content can be hosted.

expand codeexpand code
import React, { useState } from 'react';
import { Card } from 'antd';

const tabList = [
  {
    key: 'tab1',
    tab: 'tab1',
  },
  {
    key: 'tab2',
    tab: 'tab2',
  },
];

const contentList = {
  tab1: <p>content1</p>,
  tab2: <p>content2</p>,
};

const tabListNoTitle = [
  {
    key: 'article',
    tab: 'article',
  },
  {
    key: 'app',
    tab: 'app',
  },
  {
    key: 'project',
    tab: 'project',
  },
];

const contentListNoTitle = {
  article: <p>article content</p>,
  app: <p>app content</p>,
  project: <p>project content</p>,
};

const TabsCard = () => {
  const [activeTabKey1, setActiveTabKey1] = useState('tab1');
  const [activeTabKey2, setActiveTabKey2] = useState('app');

  const onTab1Change = key => {
    setActiveTabKey1(key);
  };
  const onTab2Change = key => {
    setActiveTabKey2(key);
  };

  return (
    <>
      <Card
        style={{ width: '100%' }}
        title="Card title"
        extra={<a href="#">More</a>}
        tabList={tabList}
        activeTabKey={activeTabKey1}
        onTabChange={key => {
          onTab1Change(key);
        }}
      >
        {contentList[activeTabKey1]}
      </Card>
      <br />
      <br />
      <Card
        style={{ width: '100%' }}
        tabList={tabListNoTitle}
        activeTabKey={activeTabKey2}
        tabBarExtraContent={<a href="#">More</a>}
        onTabChange={key => {
          onTab2Change(key);
        }}
      >
        {contentListNoTitle[activeTabKey2]}
      </Card>
    </>
  );
};

ReactDOM.render(<TabsCard />, mountNode);
example
Card title
This is the description

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

expand codeexpand code
import { Card, Avatar } from 'antd';
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';

const { Meta } = Card;

ReactDOM.render(
  <Card
    style={{ width: 300 }}
    cover={
      <img
        alt="example"
        src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
      />
    }
    actions={[
      <SettingOutlined key="setting" />,
      <EditOutlined key="edit" />,
      <EllipsisOutlined key="ellipsis" />,
    ]}
  >
    <Meta
      avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
      title="Card title"
      description="This is the description"
    />
  </Card>,
  mountNode,
);

API#

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

Card#

PropertyDescriptionTypeDefaultVersion
actionsThe action list, shows at the bottom of the CardArray<ReactNode>-
activeTabKeyCurrent TabPane's keystring-
bodyStyleInline style to apply to the card contentCSSProperties-
borderedToggles rendering of the border around the cardbooleantrue
coverCard coverReactNode-
defaultActiveTabKeyInitial active TabPane's key, if activeTabKey is not setstring-
extraContent to render in the top-right corner of the cardReactNode-
headStyleInline style to apply to the card headCSSProperties-
hoverableLift up when hovering cardbooleanfalse
loadingShows a loading indicator while the contents of the card are being fetchedbooleanfalse
sizeSize of carddefault | smalldefault
tabBarExtraContentExtra content in tab barReactNode-
tabListList of TabPane's headArray<{key: string, tab: ReactNode}>-
tabPropsTabs--
titleCard titleReactNode-
typeCard style type, can be set to inner or not setstring-
onTabChangeCallback when tab is switched(key) => void-

Card.Grid#

PropertyDescriptionTypeDefaultVersion
classNameThe className of containerstring-
hoverableLift up when hovering card gridbooleantrue
styleThe style object of containerCSSProperties-

Card.Meta#

PropertyDescriptionTypeDefaultVersion
avatarAvatar or iconReactNode-
classNameThe className of containerstring-
descriptionDescription contentReactNode-
styleThe style object of containerCSSProperties-
titleTitle contentReactNode-