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
PROPERTIESINSTRUCTIONSTYPEDEFAULTVERSION
actionsCard operation group, located at the bottom of the card content areaArray<ReactNode>-1.21.0
bodyStyleBody styleCSSProperties-1.21.0
borderedWhether to set the outer border of the cardbooleantrue1.21.0
classNameThe className of Card containerstring-1.21.0
coverCard coverReactNode-1.21.0
headerExtraContentExtra content to the right of the card titleReactNode-1.21.0
footerCustomize card footerReactNode-1.21.0
footerLineWhether to set borders in the footer area and content area of the cardbooleanfalse1.21.0
footerStyleFooter styleCSSProperties-1.21.0
headerCustom card header, if passed in, it will override title and headerExtraContentReactNode-1.21.0
headerLineWhether to set borders in the title area and content area of the cardbooleantrue1.21.0
headerStyleHeader styleCSSProperties-1.21.0
loadingWhether to set a placeholder when loadingbooleanfalse1.21.0
shadowsSet the time to show the shadow. If this property is not set, there will be no shadow. Optiona: hover, alwaysstring-1.21.0
styleCard styleCSSProperties-1.21.0
titleCard titleReactNode-1.21.0
CardGroup
PROPERTIESINSTRUCTIONSTYPEDEFAULTVERSION
classNameThe className of CardGroupstring-1.21.0
spacingSpacing size, support numeric value or array, [horizontal spacing, vertical spacing]number | number[]12px1.21.0
styleCardGroup styleCSSProperties-1.21.0
typeYou can set the card deck to a grid type. After setting this property, the spacing property will be overwritten.Optional: gridstring-1.21.0
Card.Meta
PROPERTIESINSTRUCTIONSTYPEDEFAULTVERSION
avataravatarReactNode-1.21.0
classNameThe className of Metastring-1.21.0
descriptiondescriptionReactNode-1.21.0
styleMeta styleCSSProperties-1.21.0
titletitleReactNode-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 detailsYou can get order progress for details
  • Always say the most important information first
  • Use "Need to" instead of "must"

Design Tokens

© 2021 - 2022 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED