Card
简介
Card组件用于在页面中展示相关内容的容器，通常包含标题、描述和可选的图片。组件设计简洁大方，具有平滑的动画效果和交互反馈，适合展示产品、文章或功能介绍等内容。
组件特性：
- 支持图片展示，自动适配尺寸
- 可设置为可点击的链接卡片
- 提供紧凑模式，适应不同空间需求
- 平滑的悬停动画效果
- 响应式设计，适配不同屏幕尺寸
基础用法
最简单的卡片展示：
基础卡片
这是一个基础的卡片内容，展示了Card组件的最简单用法。
---
/**
* @component Card.Basic
*
* @description
* 基础Card组件示例，展示最简单的卡片用法。
*/
import { Card } from '@coffic/cosy-ui';
---
<Card title="基础卡片">
这是一个基础的卡片内容，展示了Card组件的最简单用法。
</Card>
带副标题的卡片
通过subtitle属性添加描述信息：
带副标题的卡片
这是卡片的副标题，用于提供更多描述信息
卡片的主要内容区域，可以包含更详细的信息和其他元素。
---
/**
* @component Card.WithSubtitle
*
* @description
* 带副标题的Card组件示例，展示如何使用subtitle属性。
*/
import { Card } from '@coffic/cosy-ui';
---
<Card title="带副标题的卡片" subtitle="这是卡片的副标题，用于提供更多描述信息">
卡片的主要内容区域，可以包含更详细的信息和其他元素。
</Card>
带图片的卡片
通过imageUrl属性添加顶部图片：
带图片的卡片
这张卡片展示了如何添加顶部图片
这是一个带有图片的卡片，图片会自动显示在卡片顶部，并适配卡片宽度。
---
/**
* @component Card.WithImage
*
* @description
* 带图片的Card组件示例，展示如何使用imageUrl属性。
*/
import { Card } from '@coffic/cosy-ui';
---
<Card
title="带图片的卡片"
subtitle="这张卡片展示了如何添加顶部图片"
imageUrl="https://picsum.photos/400/200?random=1">
这是一个带有图片的卡片，图片会自动显示在卡片顶部，并适配卡片宽度。
</Card>
可点击的卡片
通过href属性将卡片设置为链接：
---
/**
* @component Card.Clickable
*
* @description
* 可点击的Card组件示例，展示如何使用href属性创建链接卡片。
*/
import { Card } from '@coffic/cosy-ui';
---
<Card
title="可点击的卡片"
subtitle="点击整个卡片区域可以跳转到指定链接"
href="#">
这是一个可点击的卡片，鼠标悬停时会有缩放效果，点击可以跳转到指定页面。
</Card>
紧凑模式
使用compact属性减少内边距：
紧凑卡片
使用compact模式可以减少内边距
这是一个紧凑模式的卡片，适合在空间有限的情况下使用。
---
/**
* @component Card.Compact
*
* @description
* 紧凑模式的Card组件示例，展示如何使用compact属性。
*/
import { Card } from '@coffic/cosy-ui';
---
<Card title="紧凑卡片" subtitle="使用compact模式可以减少内边距" compact>
这是一个紧凑模式的卡片，适合在空间有限的情况下使用。
</Card>
自定义样式
通过class属性自定义卡片样式：
自定义样式卡片
这个卡片使用了自定义的背景色和边框
这是一个自定义样式的卡片，展示了如何通过class属性来覆盖默认样式。
---
/**
* @component Card.CustomStyle
*
* @description
* 展示如何使用class属性自定义Card组件的样式。
*/
import { Card } from '@coffic/cosy-ui';
---
<Card
title="自定义样式卡片"
subtitle="这个卡片使用了自定义的背景色和边框"
class="cosy:bg-gradient-to-r cosy:from-blue-50 cosy:to-indigo-100 cosy:border-2 cosy:border-blue-200">
这是一个自定义样式的卡片，展示了如何通过class属性来覆盖默认样式。
</Card>