Card
Card
A container for displaying information.
Importimport{ Card }from"antd"; |
Sourcecomponents/card |
DocsEdit this page |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
Importimport{ Card }from"antd"; |
Sourcecomponents/card |
DocsEdit this page |
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.
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 | - |
| 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 | - |
| 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 | - |
| 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 |
| 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 |
| tabsMarginBottom | Margin bottom of tabs component | number | -17 |
A basic card containing a title, content and an extra corner content. Supports two sizes: default and small.
A borderless card on a gray background.
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.
More content can be hosted.
A Card that supports cover, avatar, title and description.
Card content
Card content
Card content
Card content
Card content
Card content
