astro
card
Card
简介
Card组件用于在页面中展示相关内容的容器，通常包含标题、描述和可选的图片。组件设计简洁大方，具有平滑的动画效果和交互反馈，适合展示产品、文章或功能介绍等内容。
组件特性：
- 支持图片展示，自动适配尺寸
- 可设置为可点击的链接卡片
- 提供紧凑模式，适应不同空间需求
- 平滑的悬停动画效果
- 响应式设计，适配不同屏幕尺寸
案例
基础卡片
Card with Image
This card includes an image at the top.
The image is displayed above the title and subtitle.
多卡片展示
Product A
A short description of Product A.
Product B
A short description of Product B.
Product C
A short description of Product C.
Props
class
自定义CSS类，可用于覆盖默认样式。
自定义样式卡片
这个卡片使用了自定义的背景色和边框
这是一个自定义样式的卡片，展示了如何通过class属性来覆盖默认样式。
圆角边框卡片
这个卡片使用了自定义的圆角和边框样式
这是一个带有圆角边框的卡片，展示了如何通过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>
自定义样式卡片
这个卡片使用了自定义的背景色和边框
这是一个自定义样式的卡片，展示了如何通过class属性来覆盖默认样式。
圆角边框卡片
这个卡片使用了自定义的圆角和边框样式
这是一个带有圆角边框的卡片，展示了如何通过class属性来创建独特的视觉效果。
阴影效果卡片
这个卡片使用了自定义的阴影和背景效果
这是一个带有特殊阴影效果的卡片，展示了如何通过class属性来增强视觉层次感。
---
/**
* @component Card.CustomStyle2
*
* @description
* 展示如何使用class属性自定义Card组件的圆角边框样式。
*/
import { Card } from '@coffic/cosy-ui';
---
<Card
title="圆角边框卡片"
subtitle="这个卡片使用了自定义的圆角和边框样式"
class="cosy:rounded-3xl cosy:border-4 cosy:border-purple-300 cosy:bg-purple-50">
这是一个带有圆角边框的卡片，展示了如何通过class属性来创建独特的视觉效果。
</Card>
自定义样式卡片
这个卡片使用了自定义的背景色和边框
这是一个自定义样式的卡片，展示了如何通过class属性来覆盖默认样式。
圆角边框卡片
这个卡片使用了自定义的圆角和边框样式
这是一个带有圆角边框的卡片，展示了如何通过class属性来创建独特的视觉效果。
阴影效果卡片
这个卡片使用了自定义的阴影和背景效果
这是一个带有特殊阴影效果的卡片，展示了如何通过class属性来增强视觉层次感。
---
/**
* @component Card.CustomStyle3
*
* @description
* 展示如何使用class属性自定义Card组件的阴影效果。
*/
import { Card } from '@coffic/cosy-ui';
---
<Card
title="阴影效果卡片"
subtitle="这个卡片使用了自定义的阴影和背景效果"
class="cosy:shadow-2xl cosy:shadow-orange-500/50 cosy:bg-gradient-to-br cosy:from-orange-100 cosy:to-yellow-100">
这是一个带有特殊阴影效果的卡片，展示了如何通过class属性来增强视觉层次感。
</Card>
compact
是否使用紧凑模式。
紧凑卡片
使用compact模式可以减少内边距
这是一个紧凑模式的卡片，适合在空间有限的情况下使用。
紧凑图片卡片
紧凑模式配合图片使用
这是一个带图片的紧凑卡片，在有限空间内展示更多信息。
---
/**
* @component Card.Compact
*
* @description
* 紧凑模式的Card组件示例，展示如何使用compact属性。
*/
import { Card } from '@coffic/cosy-ui';
---
<Card title="紧凑卡片" subtitle="使用compact模式可以减少内边距" compact>
这是一个紧凑模式的卡片，适合在空间有限的情况下使用。
</Card>
紧凑卡片
使用compact模式可以减少内边距
这是一个紧凑模式的卡片，适合在空间有限的情况下使用。
紧凑图片卡片
紧凑模式配合图片使用
这是一个带图片的紧凑卡片，在有限空间内展示更多信息。
---
/**
* @component Card.Compact2
*
* @description
* 紧凑模式的Card组件示例，带图片展示。
*/
import { Card } from '@coffic/cosy-ui';
---
<Card
title="紧凑图片卡片"
subtitle="紧凑模式配合图片使用"
imageUrl="/src/assets/background.svg"
compact>
这是一个带图片的紧凑卡片，在有限空间内展示更多信息。
</Card>
紧凑卡片
使用compact模式可以减少内边距
这是一个紧凑模式的卡片，适合在空间有限的情况下使用。
紧凑图片卡片
紧凑模式配合图片使用
这是一个带图片的紧凑卡片，在有限空间内展示更多信息。
---
/**
* @component Card.Compact3
*
* @description
* 紧凑模式的Card组件示例，作为链接使用。
*/
import { Card } from '@coffic/cosy-ui';
---
<Card title="紧凑链接卡片" subtitle="紧凑模式作为链接使用" href="#" compact>
这是一个紧凑的链接卡片，点击可以跳转到指定页面。
</Card>
href
如果提供，卡片将变成可点击的链接。
---
/**
* @component Card.Clickable
*
* @description
* 可点击的Card组件示例，展示如何使用href属性创建链接卡片。
*/
import { Card } from '@coffic/cosy-ui';
---
<Card
title="可点击的卡片"
subtitle="点击整个卡片区域可以跳转到指定链接"
href="#">
这是一个可点击的卡片，鼠标悬停时会有缩放效果，点击可以跳转到指定页面。
</Card>
---
/**
* @component Card.Clickable2
*
* @description
* 可点击的Card组件示例，带图片展示。
*/
import { Card } from '@coffic/cosy-ui';
---
<Card
title="图片链接卡片"
subtitle="带图片的可点击卡片"
imageUrl="/src/assets/background.svg"
href="#">
这是一个带图片的可点击卡片，结合了图片展示和链接功能。
</Card>
---
/**
* @component Card.Clickable3
*
* @description
* 可点击的Card组件示例，紧凑模式展示。
*/
import { Card } from '@coffic/cosy-ui';
---
<Card title="紧凑链接卡片" subtitle="紧凑模式的可点击卡片" href="#" compact>
这是一个紧凑模式的可点击卡片，在有限空间内提供链接功能。
</Card>
imageUrl
卡片顶部图片的URL。
带图片的卡片
这张卡片展示了如何添加顶部图片
这是一个带有图片的卡片，图片会自动显示在卡片顶部，并适配卡片宽度。
紧凑图片卡片
紧凑模式的图片卡片
这是一个紧凑模式的图片卡片，在有限空间内展示图片和内容。
---
/**
* @component Card.WithImage
*
* @description
* 带图片的Card组件示例，展示如何使用imageUrl属性。
*/
import { Card } from '@coffic/cosy-ui';
---
<Card
title="带图片的卡片"
subtitle="这张卡片展示了如何添加顶部图片"
imageUrl="https://picsum.photos/400/200?random=1">
这是一个带有图片的卡片，图片会自动显示在卡片顶部，并适配卡片宽度。
</Card>
带图片的卡片
这张卡片展示了如何添加顶部图片
这是一个带有图片的卡片，图片会自动显示在卡片顶部，并适配卡片宽度。
紧凑图片卡片
紧凑模式的图片卡片
这是一个紧凑模式的图片卡片，在有限空间内展示图片和内容。
---
/**
* @component Card.WithImage2
*
* @description
* 带图片的Card组件示例，作为链接使用。
*/
import { Card } from '@coffic/cosy-ui';
---
<Card
title="图片链接卡片"
subtitle="带图片的可点击卡片"
imageUrl="https://picsum.photos/400/200?random=2"
href="#">
这是一个带图片的可点击卡片，结合了图片展示和链接功能。
</Card>
带图片的卡片
这张卡片展示了如何添加顶部图片
这是一个带有图片的卡片，图片会自动显示在卡片顶部，并适配卡片宽度。
紧凑图片卡片
紧凑模式的图片卡片
这是一个紧凑模式的图片卡片，在有限空间内展示图片和内容。
---
/**
* @component Card.WithImage3
*
* @description
* 带图片的Card组件示例，紧凑模式展示。
*/
import { Card } from '@coffic/cosy-ui';
---
<Card
title="紧凑图片卡片"
subtitle="紧凑模式的图片卡片"
imageUrl="https://picsum.photos/400/200?random=3"
compact>
这是一个紧凑模式的图片卡片，在有限空间内展示图片和内容。
</Card>
subtitle
卡片副标题或描述。
带副标题的卡片
这是卡片的副标题，用于提供更多描述信息
卡片的主要内容区域，可以包含更详细的信息和其他元素。
紧凑副标题卡片
紧凑模式下的副标题卡片，适合空间有限的情况
这是一个紧凑模式的副标题卡片，在有限空间内展示标题、副标题和内容。
---
/**
* @component Card.WithSubtitle
*
* @description
* 带副标题的Card组件示例，展示如何使用subtitle属性。
*/
import { Card } from '@coffic/cosy-ui';
---
<Card title="带副标题的卡片" subtitle="这是卡片的副标题，用于提供更多描述信息">
卡片的主要内容区域，可以包含更详细的信息和其他元素。
</Card>
带副标题的卡片
这是卡片的副标题，用于提供更多描述信息
卡片的主要内容区域，可以包含更详细的信息和其他元素。
紧凑副标题卡片
紧凑模式下的副标题卡片，适合空间有限的情况
这是一个紧凑模式的副标题卡片，在有限空间内展示标题、副标题和内容。
---
/**
* @component Card.WithSubtitle2
*
* @description
* 带副标题的Card组件示例，作为链接使用。
*/
import { Card } from '@coffic/cosy-ui';
---
<Card
title="链接卡片"
subtitle="这是一个可点击的卡片，带有详细的副标题描述"
href="#">
这是一个带副标题的链接卡片，副标题提供了额外的上下文信息。
</Card>
带副标题的卡片
这是卡片的副标题，用于提供更多描述信息
卡片的主要内容区域，可以包含更详细的信息和其他元素。
紧凑副标题卡片
紧凑模式下的副标题卡片，适合空间有限的情况
这是一个紧凑模式的副标题卡片，在有限空间内展示标题、副标题和内容。
---
/**
* @component Card.WithSubtitle3
*
* @description
* 带副标题的Card组件示例，紧凑模式展示。
*/
import { Card } from '@coffic/cosy-ui';
---
<Card
title="紧凑副标题卡片"
subtitle="紧凑模式下的副标题卡片，适合空间有限的情况"
compact>
这是一个紧凑模式的副标题卡片，在有限空间内展示标题、副标题和内容。
</Card>
title
卡片标题。
基础卡片
这是一个基础的卡片内容，展示了Card组件的最简单用法。
---
/**
* @component Card.Basic
*
* @description
* 基础Card组件示例，展示最简单的卡片用法。
*/
import { Card } from '@coffic/cosy-ui';
---
<Card title="基础卡片">
这是一个基础的卡片内容，展示了Card组件的最简单用法。
</Card>
Slots
default
卡片内容插槽，用于在副标题下方放置额外内容。
基础卡片
这是一个基础的卡片内容，展示了Card组件的最简单用法。
---
/**
* @component Card.Basic
*
* @description
* 基础Card组件示例，展示最简单的卡片用法。
*/
import { Card } from '@coffic/cosy-ui';
---
<Card title="基础卡片">
这是一个基础的卡片内容，展示了Card组件的最简单用法。
</Card>