- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
Simple rectangular container.
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 | - | |
| bodyStyle | Inline style to apply to the card content | CSSProperties | - | |
| 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 | - | |
| extra | Content to render in the top-right corner of the card | ReactNode | - | |
| headStyle | Inline style to apply to the card head | CSSProperties | - | |
| 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 | - | |
| 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 | number | 16 |
| headerFontSizeSM | Font size of small card header | number | 14 |
| headerHeight | Height of card header | number | 56 |
| headerHeightSM | Height of small card header | 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.
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.
A Card that supports cover, avatar, title and description.
