# Card

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/card
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

Universal card container.

## Install

```bash
npm install antd-mobile@5.43.0
```

antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register `createRoot` with `unstableSetRender` at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with `<html data-prefers-color-scheme="dark">`.

Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as `DemoBlock` are JGuang rewrites, not antd-mobile APIs.

Universal card container.

## When to Use

It can carry text, lists, pictures, paragraphs, etc., which is convenient for users to browse the content.

## Demos

## Card

### Props

| Name | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| bodyClassName | The custom class name of the body | `string` | - |  |
| bodyStyle | The custom style of the body | `React.CSSProperties` | - |  |
| extra | The right area of the header | `ReactNode` | - |  |
| headerClassName | The custom class name of the header | `string` | - |  |
| headerStyle | The custom style of the header | `React.CSSProperties` | - |  |
| icon | The left icon of the header | `ReactNode` | - | 5.38.0 |
| onBodyClick | The click event of the body area | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |  |
| onClick | The click event of the Card | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |  |
| onHeaderClick | The click event of the header area | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |  |
| title | The left area of the header | `ReactNode` | - |  |

### CSS Variables

| Name | Description | Default | Global | Version |
| --- | --- | --- | --- | --- |
| `--adm-card-border-radius` | Border radius of the button. | `8px` | `--adm-card-border-radius` |  |
| `--adm-card-padding-inline` | Horizontal padding of the card. | `12px` | `--adm-card-padding-inline` |  |
| `--adm-card-header-border-width` | Bottom border width of the card header. | `0.5px` | `--adm-card-header-border-width` |  |
| `--adm-card-header-border-color` | Bottom border color of the card header. | `var(--adm-color-border)` | `--adm-card-header-border-color` |  |
| `--adm-card-header-gap` | Horizontal gap of the card header. | `8px` | `--adm-card-header-gap` | 5.38.0 |
| `--adm-card-header-padding-block` | Vertical of the card header. | `12px` | `--adm-card-header-padding-block` |  |
| `--adm-card-body-padding-block` | Vertical padding of the card body. | `12px` | `--adm-card-body-padding-block` |  |

---

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