logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.5.1
  • Components Overview
  • General
    • Button
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • Tour
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
  • Other
    • Affix
    • App
    • ConfigProvider
    • FloatButton
    • Watermark
When To Use
Examples
Basic card
No border
Simple card
Customized content
Card in column
Loading card
Grid card
Inner card
With tabs
Support more content configuration
API
Card
Card.Grid
Card.Meta
Design Token

Card

CalendarCarousel

Resources

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuqueAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTechMore Products

yuqueYuQue-Document Collaboration Platform
AntVAntV-Data Visualization
EggEgg-Enterprise Node.js Framework
kitchenKitchen-Sketch Toolkit
xtechAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community

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

Basic card

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

expand codeexpand code
TypeScript
JavaScript
import { Card, Space } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <Space direction="vertical" size={16}>
    <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>
  </Space>
);

export default App;
No border

A borderless card on a gray background.

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

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

export default App;
Simple card

A simple card only containing a content area.

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

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

export default App;
Customized content

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

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

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 in column

Cards usually cooperate with grid column layout in overview page.

expand codeexpand code
TypeScript
JavaScript
import { Card, Col, Row } from 'antd';
import React from 'react';

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

export default App;
Loading card

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

expand codeexpand code
TypeScript
JavaScript
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://xsgames.co/randomusers/avatar.php?g=pixel&key=1" />}
          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://xsgames.co/randomusers/avatar.php?g=pixel&key=2" />}
            title="Card title"
            description="This is the description"
          />
        </Skeleton>
      </Card>
    </>
  );
};

export default App;
Grid card

Grid style card content.

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

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;
Inner card

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

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

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;
With tabs

More content can be hosted.

expand codeexpand code
TypeScript
JavaScript
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={onTab1Change}
      >
        {contentList[activeTabKey1]}
      </Card>
      <br />
      <br />
      <Card
        style={{ width: '100%' }}
        tabList={tabListNoTitle}
        activeTabKey={activeTabKey2}
        tabBarExtraContent={<a href="#">More</a>}
        onTabChange={onTab2Change}
      >
        {contentListNoTitle[activeTabKey2]}
      </Card>
    </>
  );
};

export default App;
Support more content configuration

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

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

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://xsgames.co/randomusers/avatar.php?g=pixel" />}
      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-

Design Token

Global Token

Token NameDescriptionTypeDefault Value
colorBgContainerContainer background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`.string#ffffff
colorBorderSecondarySlightly lighter than the default border color, this color is the same as `colorSplit`. Solid color is used.string#f0f0f0
colorFillAlterControl the alternative background color of element.stringrgba(0, 0, 0, 0.02)
colorPrimaryBrand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.string#1677ff
colorTextDefault text color which comply with W3C standards, and this color is also the darkest neutral color.stringrgba(0, 0, 0, 0.88)
colorTextDescriptionControl the font color of text description.stringrgba(0, 0, 0, 0.45)
colorTextHeadingControl the font color of heading.stringrgba(0, 0, 0, 0.88)
borderRadiusLGLG size border radius, used in some large border radius components, such as Card, Modal and other components.number8
boxShadowTertiaryControl the tertiary box shadow style of an element.string 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02)
fontFamilyThe font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.string-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSizeThe most widely used font size in the design system, from which the text gradient will be derived.number14
fontSizeLGLarge font sizenumber16
fontWeightStrongControl the font weight of heading components (such as h1, h2, h3) or selected item.number600
lineHeightLine height of text.number1.5714285714285714
lineHeightLGLine height of large text.number1.5
lineTypeBorder style of base componentsstringsolid
lineWidthBorder width of base componentsnumber1
marginXSControl the margin of an element, with a small size.number8
marginXXSControl the margin of an element, with the smallest size.number4
motionDurationMidMotion speed, medium speed. Used for medium element animation interaction.string0.2s
paddingControl the padding of the element.number16
paddingLGControl the large padding of the element.number24
paddingSMControl the small padding of the element.number12
paddingXSControl the extra small padding of the element.number8
Default size card
More

Card content

Card content

Card content

Small size card
More

Card content

Card content

Card content

Card title

Card content

Card content

Card content

Card content

Card content

Card content

example
Europe Street beat
www.instagram.com
Card title
Card content
Card title
Card content
Card title
Card content

Card Title
Content
Content
Content
Content
Content
Content
Content
Card title
Inner Card title
More
Inner Card content
Inner Card title
More
Inner Card content
Card title
More
tab1
tab2

content1



article
app
project
More

app content

example
Card title
This is the description