Card - Semi Design

Show · Card

Card

Card container can consist of titles, paragraphs, pictures, lists, and other content.

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-label to indicate the function of the Card
When Card loading, aria-busy will 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"