Card
Card
A container for displaying information.
Importimport { Card } from "antd"; |
Sourcecomponents/card |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
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 | - | |
Toggles rendering of the border around the card, please use variant instead | boolean | true | ||
| variant | Variants of Card | outlined | borderless | | outlined | 5.24.0 |
| 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 |
| 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 |
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
