Search
Card
Simple default rectangular container
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.
Basic card
A basic card containing a title, content and an extra corner content. Supports two sizes: default and small.
Default size card
Card content
Card content
Card content
Small size card
Card content
Card content
Card content
No border
A borderless card on a gray background
Card title
Card content
Card content
Card content
Simple card
A simple card only containing a content area.
Customized content
You can use Card.Meta to support more flexible content.
Card in column
Cards usually cooperate with grid column layout in overview page
Card title
Card content
Card content
Card content
Card title
Card content
Card content
Card content
Loading card
Shows a loading indicator while the contents of the card is being fetched.
Disable loading state
Grid card
Grid style card content.
Card Title
Content
Content
Content
Content
Content
Content
Content
Content
Inner card
It can be placed inside the ordinary card to display the information of the multilevel structure.
Card Title
Inner Card title
Card content
Card content
Card content
Inner Card title
Card content
Card content
Card content
With tabs
More content can be hosted.
Inner Card title
Tab 1
Tab 2
Tab 3
Tab 4
Tab 4
Content
Tab 1
Tab 2
Tab 3
Tab 4
Tab 4
Content
Support more content configuration
A Card that supports cover, avatar, title and description.
With Alert
A Card with Alert instead of title
Card content
Card content
Card content
API
Card
| Property | Description | Type | Default |
|---|---|---|---|
actions | The action list, shows at the bottom of the Card. | Array | - |
activeTabKey | Current TabPane`s key | string | - |
headStyle | Inline style to apply to the card head | CSSProperties | - |
bodyStyle | Inline style to apply to the card content | CSSProperties | - |
bordered | Toggles rendering of the border around the card | boolean | true |
withAlert | To use Alert instead of title text set true | boolean | false |
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 | string|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 |
tabList | List of TabPane`s head. | Array<{key: string, tab: ReactNode}> | - |
tabBarExtraContent | Extra content in tab bar | React.ReactNode | - |
size | Size of card | default | small | default |
title | Card title | string|ReactNode | - |
type | Card style type, can be set to inner or not set | string | - |
onTabChange | Callback when tab is switched | (key) => void | - |
tabProps | - | - |
Card.Grid
| Property | Description | Type | Default |
|---|---|---|---|
className | className of container | string | - |
hoverable | Lift up when hovering card grid | boolean | true |
style | style object of container | CSSProperties | - |
Card.Meta
| Property | Description | Type | Default |
|---|---|---|---|
avatar | avatar or icon | ReactNode | - |
className | className of container | string | - |
description | description content | ReactNode | - |
style | style object of container | CSSProperties | - |
title | title content | ReactNode | - |