## Card 卡片
基础容器,用来显示文字、列表、图文等内容,也可以配合其它组件一起使用。
![](https://img.kancloud.cn/66/cd/66cd150fa288c4d7d8f8d3748f4a1b37_1905x263.png)
### 代码示例
基础用法
```html
<cvu-card>
<div slot="header">
卡片头部
</div>
<div slot="content">
卡片内容
</div>
<div slot="footer">
卡片底部
</div>
</cvu-card>
```
无边框
>[info] 设置`border`为`false`
![](https://img.kancloud.cn/f7/60/f76054f9044023b1932433dadc68705e_1912x265.png)
```html
<cvu-card :border="false">
<div slot="header">
卡片头部
</div>
<div slot="content">
卡片内容
</div>
<div slot="footer">
卡片底部
</div>
</cvu-card>
```
### props
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| border | 是否显示边框 | Boolean | true |
| padding | 卡片内边距 | String | \- |
| hover | 鼠标悬停是否展示阴影效果 | Boolean | true |
| divider | 是否显示header \| footer分割线 | Boolean | true |
| divider-margin | 分割线外边距,divider参数为true时生效 | String | \- |
### slot
| 名称 | 说明 |
| --- | --- |
| header | 卡片头部 |
| content | 卡片内容 |
| footer | 卡片底部 |
- 介绍
- 安装
- 快速上手
- 组件
- 基础
- Button 按钮
- ButtonGroup 按钮组
- 布局
- Card 卡片
- Col 列
- Collapse 折叠面板
- Divider 分割线
- Empty 空数据
- Row 行
- 导航
- Paginator 分页
- PaginatorMini 分页
- Tab 标签页
- 表单
- Cascader 级联选择
- PasswordStrength 密码强度
- Print 局部打印
- Table 表格
- Upload 文件上传
- 视图
- Calendar 日历
- Drawer 抽屉
- Loading 加载
- Message 全局提示
- Modal 对话框
- Notification 通知菜单
- Poptip 气泡提示
- Preview 图片预览
- PreviewPdf pdf文件预览
- Tooltip 文字提示
- Tree 树形控件
- 方法
- Copy 复制到剪贴板
- DescNotice 桌面消息通知
- Html2Pdf 导出pdf
- Storage 定时存储
- 其他
- BackTop 返回顶部
- NumberScroll 数字动画
- NumberZero 数字前补零
- Spin 局部加载
- Tcplayer 播放器