Card
Importimport{ Card }from"antd"; |
Sourcecomponents/card |
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
A basic card containing a title, content and an extra corner content. Supports two sizes: default and small.
Card content
Card content
Card content
A borderless card on a gray background.
Card content
Card content
Card content
A simple card only containing a content area.
You can use Card.Meta to support more flexible content.
Cards usually cooperate with grid column layout in overview page.
Shows a loading indicator while the contents of the card is being fetched.
Grid style card content.
It can be placed inside the ordinary card to display the information of the multilevel structure.
content1
app content
More content can be hosted.
A Card that supports cover, avatar, title and description.
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
header
5.14.0set `header` of cardtitle
5.14.0set `title` of cardextra
5.14.0set `extra` of cardcover
5.14.0set `cover` of cardbody
5.14.0set `body` of cardactions
5.14.0set `actions` of card
Design Token
Component TokenHow to use?
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| actionsBg | Background color of card actions | string | #ffffff |
| actionsLiMargin | Margin of each item in card actions | string | 12px 0 |
| bodyPadding | Padding of card body | number | 24 |
| bodyPaddingSM | Padding of small card body | number | 12 |
| extraColor | Text color of extra area | string | rgba(0,0,0,0.88) |
| headerBg | Background color of card header | string | transparent |
| headerFontSize | Font size of card header | string | number | 16 |
| headerFontSizeSM | Font size of small card header | string | number | 14 |
| headerHeight | Height of card header | string | number | 56 |
| headerHeightSM | Height of small card header | string | number | 38 |
| headerPadding | Padding of card head | number | 24 |
| headerPaddingSM | Padding of small card head | number | 12 |
| tabsMarginBottom | Margin bottom of tabs component | number | -17 |