Importimport { Card } from 'antd'; |
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 | Global Config |
|---|---|---|---|---|---|
| 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 | × | ||
Style of card body, please use styles.body instead | CSSProperties | - | - | × | |
| variant | Variants of Card | outlined | borderless | outlined | 5.24.0 | 5.24.0 |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | 5.14.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 | × | |
Style of card head, please use styles.header instead | CSSProperties | - | - | × | |
| loading | Shows a loading indicator while the contents of the card are being fetched | boolean | false | × | |
| size | Size of card | medium | small | medium | × | |
| 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 | - | × | |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | 5.14.0 | |
| onTabChange | Callback when tab is switched | (key) => void | - | × |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| hoverable | Lift up when hovering card grid | boolean | true |
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| avatar | Avatar or icon | ReactNode | - | × | |
| description | Description content | ReactNode | - | × | |
| 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 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorBgContainer | Container background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`. | string | #ffffff |
| colorBorderSecondary | Slightly lighter than the default border color, this color is the same as `colorSplit`. Solid color is used. | string | #f0f0f0 |
| colorFillAlter | Control the alternative background color of element. | string | rgba(0,0,0,0.02) |
| colorIcon | Weak action. Such as `allowClear` or Alert close button | string | rgba(0,0,0,0.45) |
| colorPrimary | Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics. | string | #1677ff |
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| colorTextDescription | Control the font color of text description. | string | rgba(0,0,0,0.45) |
| colorTextHeading | Control the font color of heading. | string | rgba(0,0,0,0.88) |
| borderRadiusLG | LG size border radius, used in some large border radius components, such as Card, Modal and other components. | number | 8 |
| boxShadowTertiary | Control the tertiary box shadow style of an element. | string | 0 1px 2px 0 rgba(0,0,0,0.05), 0 1px 6px -1px rgba(0,0,0,0.03), 0 2px 4px 0 rgba(0,0,0,0.03) |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| fontSizeLG | Large font size | number | 16 |
| fontWeightStrong | Control the font weight of heading components (such as h1, h2, h3) or selected item. | number | 600 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| lineType | Border style of base components | string | solid |
| lineWidth | Border width of base components | number | 1 |
| marginXS | Control the margin of an element, with a small size. | number | 8 |
| marginXXS | Control the margin of an element, with the smallest size. | number | 4 |
| motionDurationMid | Motion speed, medium speed. Used for medium element animation interaction. | string | 0.2s |
| padding | Control the padding of the element. | number | 16 |
| paddingLG | Control the large padding of the element. | number | 24 |
Card content
Card content
Card content
Card content
Card content
Card content
