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
import React from 'react';
import { Card, Space } from 'antd';
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
import React from 'react';
import { Card } from 'antd';
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
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
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
import React from 'react';
import { Card, Col, Row } from 'antd';
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
import React, { useState } from 'react';
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import { Avatar, Card, Flex, Switch } from 'antd';
const actions: React.ReactNode[] = [
<EditOutlined key="edit" />,
<SettingOutlined key="setting" />,
<EllipsisOutlined key="ellipsis" />,
];
const App: React.FC = () => {
const [loading, setLoading] = useState<boolean>(true);
return (
<Flex gap="middle" align="start" vertical>
<Switch checked={!loading} onChange={(checked) => setLoading(!checked)} />
<Card loading={loading} actions={actions} style={{ minWidth: 300 }}>
<Card.Meta
avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />}
title="Card title"
description={
<>
<p>This is the description</p>
<p>This is the description</p>
</>
}
/>
</Card>
<Card loading={loading} actions={actions} style={{ minWidth: 300 }}>
<Card.Meta
avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=2" />}
title="Card title"
description={
<>
<p>This is the description</p>
<p>This is the description</p>
</>
}
/>
</Card>
</Flex>
);
};
export default App;
Grid card
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
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
import React, { useState } from 'react';
import { Card } from 'antd';
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',
label: 'article',
},
{
key: 'app',
label: 'app',
},
{
key: 'project',
label: '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}
tabProps={{
size: 'middle',
}}
>
{contentListNoTitle[activeTabKey2]}
</Card>
</>
);
};
export default App;
Support more content configuration
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://api.dicebear.com/7.x/miniavs/svg?seed=8" />}
title="Card title"
description="This is the description"
/>
</Card>
);
export default App;
Component Token
import React from 'react';
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import { Card, ConfigProvider } from 'antd';
export default () => (
<ConfigProvider
theme={{
components: {
Card: {
headerBg: '#e6f4ff',
headerFontSize: 20,
headerFontSizeSM: 20,
headerHeight: 60,
headerHeightSM: 60,
actionsBg: '#e6f4ff',
actionsLiMargin: `2px 0`,
tabsMarginBottom: 0,
extraColor: 'rgba(0,0,0,0.25)',
},
},
}}
>
<Card
title="Card title"
actions={[
<SettingOutlined key="setting" />,
<EditOutlined key="edit" />,
<EllipsisOutlined key="ellipsis" />,
]}
extra="More"
tabList={[
{
key: 'tab1',
label: 'tab1',
},
{
key: 'tab2',
label: 'tab2',
},
]}
>
<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>
</ConfigProvider>
);
API
Common props ref:Common props
<Card title="Card title">Card content</Card>
Property |
Description |
Type |
Default |
Version |
actions |
The action list, shows at the bottom of the Card |
Array<ReactNode> |
- |
|
activeTabKey |
Current TabPane’s key |
string |
- |
|
bordered |
Toggles rendering of the border around the card |
boolean |
true |
|
cover |
Card cover |
ReactNode |
- |
|
defaultActiveTabKey |
Initial active TabPane’s key, if activeTabKey is not set |
string |
The key of first tab |
|
extra |
Content to render in the top-right corner of the card |
ReactNode |
- |
|
hoverable |
Lift up when hovering card |
boolean |
false |
|
loading |
Shows a loading indicator while the contents of the card are being fetched |
boolean |
false |
|
size |
Size of card |
default | small |
default |
|
tabBarExtraContent |
Extra content in tab bar |
ReactNode |
- |
|
tabList |
List of TabPane’s head |
TabItemType[] |
- |
|
tabProps |
Tabs |
- |
- |
|
title |
Card title |
ReactNode |
- |
|
type |
Card style type, can be set to inner or not set |
string |
- |
|
classNames |
Config Card build-in module’s className |
Record<SemanticDOM, string> |
- |
5.14.0 |
styles |
Config Card build-in module’s style |
Record<SemanticDOM, CSSProperties> |
- |
5.14.0 |
onTabChange |
Callback when tab is switched |
(key) => void |
- |
|
Card.Grid
Property |
Description |
Type |
Default |
Version |
className |
The className of container |
string |
- |
|
hoverable |
Lift up when hovering card grid |
boolean |
true |
|
style |
The style object of container |
CSSProperties |
- |
|
Card.Meta
Property |
Description |
Type |
Default |
Version |
avatar |
Avatar or icon |
ReactNode |
- |
|
className |
The className of container |
string |
- |
|
description |
Description content |
ReactNode |
- |
|
style |
The style object of container |
CSSProperties |
- |
|
title |
Title content |
ReactNode |
- |
|
Semantic DOM
Design Token