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';
import React from 'react';

const App: React.FC = () => (
  <>
    <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>
  </>
);

export default App;
Card title

Card content

Card content

Card content

A borderless card on a gray background.

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

const App: React.FC = () => (
  <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>
);

export default App;
.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';
import React from 'react';

const App: React.FC = () => (
  <Card style={{ width: 300 }}>
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
  </Card>
);

export default App;
example
Europe Street beat
www.instagram.com

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

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

const { Meta } = Card;

const App: React.FC = () => (
  <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>
);

export default App;
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';
import React from 'react';

const App: React.FC = () => (
  <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>
);

export default App;

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

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

const { Meta } = Card;

const App: React.FC = () => {
  const [loading, setLoading] = useState(true);

  const onChange = (checked: boolean) => {
    setLoading(!checked);
  };

  return (
    <>
      <Switch checked={!loading} onChange={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>
    </>
  );
};

export default App;
Card Title
Content
Content
Content
Content
Content
Content
Content

Grid style card content.

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

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

const App: React.FC = () => (
  <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>
);

export default App;
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';
import React from 'react';

const App: React.FC = () => (
  <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>
);

export default App;
Card title

content1



app content

More content can be hosted.

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

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

const contentList: Record<string, React.ReactNode> = {
  tab1: <p>content1</p>,
  tab2: <p>content2</p>,
};

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

const contentListNoTitle: Record<string, React.ReactNode> = {
  article: <p>article content</p>,
  app: <p>app content</p>,
  project: <p>project content</p>,
};

const App: React.FC = () => {
  const [activeTabKey1, setActiveTabKey1] = useState<string>('tab1');
  const [activeTabKey2, setActiveTabKey2] = useState<string>('app');

  const onTab1Change = (key: string) => {
    setActiveTabKey1(key);
  };
  const onTab2Change = (key: string) => {
    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>
    </>
  );
};

export default App;
example
Card title
This is the description

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

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

const { Meta } = Card;

const App: React.FC = () => (
  <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>
);

export default App;

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-