Card

Card is generally used as a container for concise introduction or information.

Install

npm install @arco-design/web-react@2.66.18

Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.

Examples

Basic: Basic usage. Can hold anything from text, lists, pictures, to paragraphs. Normally used for module separation and content overview.
Hoverable: Use hoverable to add a hover style to the card. The hover style can also be customized through style override.
No border: Set bordered to false to use borderless cards.
Only content: The card can only have a content area.
Meta: Use Card.Meta to support more flexible content (cover, avatar, title, description)
With row: Often used together with Grid on the overview page of systems.
With skeleton: Combine Skeleton to display the text skeleton before the data is loaded.
Card grid: Use Card.Grid to enable the card content segmentation mode.
Inner card: Other card components can be nested in the card.
With tab: Tabs component can be used in card.
With actions: The actions field receives an array of ReactNode, which will be displayed at the bottom as button group.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

API

Card

Property	Description	Type	DefaultValue
bordered	Whether to render the border	boolean	`true`
hoverable	Whether the card can be hovered	boolean	`-`
loading	Whether on loading state	boolean	`-`
size	Size of the card	'default' \| 'small'	`default`
cover	Cover of card	ReactNode	`-`
extra	Content to render in the top-right corner of the card	string \| ReactNode	`-`
title	Title of the card	string \| ReactNode	`-`
actions	The action list which shows at the bottom of the card	ReactNode[]	`-`
bodyStyle	The additional css style to apply to card content	CSSProperties	`-`
className	Additional css class	string \| string[]	`-`
headerStyle	The additional css style to apply to card head	CSSProperties	`-`
style	Additional style	CSSProperties	`-`

Card.Meta

Property	Description	Type	DefaultValue
avatar	Avatar of the card	ReactNode	`-`
description	Description of the card	string \| ReactNode	`-`
title	Title of the card	string \| ReactNode	`-`
className	Additional css class	string \| string[]	`-`
style	Additional style	CSSProperties	`-`

Card.Grid

Property	Description	Type	DefaultValue
hoverable	Whether can be hovered	boolean	`-`
className	Additional css class	string \| string[]	`-`
style	Additional style	CSSProperties	`-`