卡片 Card
将信息分类后分标题、详情等区域聚合展现，一般作为简洁介绍或者信息的大盘和入口。
安装
npm install @arco-design/web-react@2.66.18
在入口引入 @arco-design/web-react/dist/css/arco.css，用 ConfigProvider 设置语言。React 19 项目还需在入口最先引入 @arco-design/web-react/es/_util/react-19-adapter，否则 Message、Modal 等命令式 API 无法渲染。
示例
- 基础用法：常规的内容容器，可承载文字、列表、图片、段落，常用于模块划分和内容概览。
- 鼠标悬浮样式：指定
hoverable来为卡片添加鼠标悬浮样式，同时你可以通过样式覆盖来自定义悬浮样式。 - 无边框卡片：设置
bordered为false来使用无边框卡片。 - 简洁卡片：卡片可以只有内容区域。
- 更灵活的内容展示：使用
Card.Meta支持更加灵活的内容（封面、头像、 标题、描述信息） - 栅格卡片：在系统概览页面常常和栅格进行配合。
- 预加载的卡片：结合
Skeleton来在数据读入前显示文本骨架。 - 网络型内嵌卡片：通过
Card.Grid来使用卡片内容区隔模式。 - 内部卡片：卡片中可以嵌套其他卡片组件。
- 带页签的卡片：举例来说，可以在卡片组件里面使用
Tabs标签页组件。 - 支持更多内容配置：
actions字段接收一个ReactNode数组，用于展示底部按钮组。
示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。
API
Card
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| bordered | 是否有边框 | boolean | true |
| hoverable | 是否可悬浮 | boolean | - |
| loading | 是否为加载中 | boolean | - |
| size | 卡片尺寸 | 'default' | 'small' | default |
| cover | 卡片封面 | ReactNode | - |
| extra | 卡片右上角的操作区域 | string | ReactNode | - |
| title | 卡片标题 | string | ReactNode | - |
| actions | 卡片底部的操作组 | ReactNode[] | - |
| bodyStyle | 内容区域自定义样式 | CSSProperties | - |
| className | 节点类名 | string | string[] | - |
| headerStyle | 自定义标题区域样式 | CSSProperties | - |
| style | 节点样式 | CSSProperties | - |
Card.Meta
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| avatar | 头像 | ReactNode | - |
| description | 描述 | string | ReactNode | - |
| title | 标题 | string | ReactNode | - |
| className | 节点类名 | string | string[] | - |
| style | 节点样式 | CSSProperties | - |
Card.Grid
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| hoverable | 是否可以悬浮 | boolean | - |
| className | 节点类名 | string | string[] | - |
| style | 节点样式 | CSSProperties | - |