Demos
How to import
Basic card
The basic card contains the title, content and other parts.
Simple card
The card can only set the content area.
Cover
You can use the
cover property to set the cover.Border and line
You can use
bordered to set whether the card has an outer border, the default is true. At the same time, you can also use headerLine to set whether the content area and title area have borders, and footerLine to set whether the content area and footer area have borders.Shadows
You can use
shadows to set the timing of the shadow display. Optional: hover (show shadow when hover), always (show shadow always), if this property is not set, there will be no shadow.Customized content
You can use
Card.Meta to support more flexible content, allowing you to set title, avatar, and description.Inner card
Other cards can be nested inside the card.
Card in column
The system overview page is often combined with the grid.
loading
You can use the
loading property of Card to set whether to display placeholder elements in the card content area. When it is true, the placeholder elements will be displayed, and vice versa.With Skeleton
The
loading property of Card can only set the preloading effect of the content area. If you want to set the preloading of other parts, or customize a richer preloading effect, you can combine it with the Skeleton component.With tabs
You can use the
Tabs component in the card component.Actions
actions receives the ReactNode array, and the elements will be displayed at the bottom of the content area with a horizontal spacing of 12px.Card group
Use
CardGroup to present the cards in an evenly spaced arrangement.Grid card
You can use the
type property of CardGroup to set the card group to a grid type.API reference
Card
| PROPERTIES | INSTRUCTIONS | TYPE | DEFAULT | VERSION |
|---|---|---|---|---|
| actions | Card operation group, located at the bottom of the card content area | Array<ReactNode> | - | 1.21.0 |
| bodyStyle | Body style | CSSProperties | - | 1.21.0 |
| bordered | Whether to set the outer border of the card | boolean | true | 1.21.0 |
| className | The className of Card container | string | - | 1.21.0 |
| cover | Card cover | ReactNode | - | 1.21.0 |
| headerExtraContent | Extra content to the right of the card title | ReactNode | - | 1.21.0 |
| footer | Customize card footer | ReactNode | - | 1.21.0 |
| footerLine | Whether to set borders in the footer area and content area of the card | boolean | false | 1.21.0 |
| footerStyle | Footer style | CSSProperties | - | 1.21.0 |
| header | Custom card header, if passed in, it will override title and headerExtraContent | ReactNode | - | 1.21.0 |
| headerLine | Whether to set borders in the title area and content area of the card | boolean | true | 1.21.0 |
| headerStyle | Header style | CSSProperties | - | 1.21.0 |
| loading | Whether to set a placeholder when loading | boolean | false | 1.21.0 |
| shadows | Set the time to show the shadow. If this property is not set, there will be no shadow. Optiona: hover, always | string | - | 1.21.0 |
| style | Card style | CSSProperties | - | 1.21.0 |
| title | Card title | ReactNode | - | 1.21.0 |
CardGroup
| PROPERTIES | INSTRUCTIONS | TYPE | DEFAULT | VERSION |
|---|---|---|---|---|
| className | The className of CardGroup | string | - | 1.21.0 |
| spacing | Spacing size, support numeric value or array, [horizontal spacing, vertical spacing] | number | number[] | 12px | 1.21.0 |
| style | CardGroup style | CSSProperties | - | 1.21.0 |
| type | You can set the card deck to a grid type. After setting this property, the spacing property will be overwritten.Optional: grid | string | - | 1.21.0 |
Card.Meta
| PROPERTIES | INSTRUCTIONS | TYPE | DEFAULT | VERSION |
|---|---|---|---|---|
| avatar | avatar | ReactNode | - | 1.21.0 |
| className | The className of Meta | string | - | 1.21.0 |
| description | description | ReactNode | - | 1.21.0 |
| style | Meta style | CSSProperties | - | 1.21.0 |
| title | title | ReactNode | - | 1.21.0 |
Accessibility
- Card supports the input of
aria-labelto indicate the function of the Card - When Card loading,
aria-busywill be turned on - Card is a container-type component, and any elements inside the card need to follow their respective accessibility guidelines
Content Guidelines
- Card title
- Card titles should be informative and focus on the most important information
- try to limit the title to 1 phrase or segment
- Card titles should be written in sentence case
- do not end with punctuation marks (except question marks)
- Text
- Actionable: Use imperative sentences instead of "you can" to describe the body, which better tells the user what can be done
| โ Recommended usage | โ Deprecated usage |
|---|---|
| Get order progress for details | You can get order progress for details |
- Always say the most important information first
- Use "Need to" instead of "must"
