# Card

- Page: https://jiguang132.com/resources/arco-design/docs/card
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

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

## Install

```bash
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 |`-`|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt