Card
Introduction
The Card component is a container for displaying related content on pages, typically containing titles, descriptions, and optional images. The component features a clean and elegant design with smooth animation effects and interactive feedback, perfect for showcasing products, articles, or feature introductions.
Component features:
- Supports image display with automatic size adaptation
- Can be set as clickable link cards
- Provides compact mode for different space requirements
- Smooth hover animation effects
- Responsive design, adapts to different screen sizes
Basic Usage
The simplest card display:
基础卡片
这是一个基础的卡片内容，展示了Card组件的最简单用法。
---
/**
* @component Card.Basic
*
* @description
* 基础Card组件示例，展示最简单的卡片用法。
*/
import { Card } from '@coffic/cosy-ui';
---
<Card title="基础卡片">
这是一个基础的卡片内容，展示了Card组件的最简单用法。
</Card>
Card with Subtitle
Add description information using the subtitle property:
带副标题的卡片
这是卡片的副标题，用于提供更多描述信息
卡片的主要内容区域，可以包含更详细的信息和其他元素。
---
/**
* @component Card.WithSubtitle
*
* @description
* 带副标题的Card组件示例，展示如何使用subtitle属性。
*/
import { Card } from '@coffic/cosy-ui';
---
<Card title="带副标题的卡片" subtitle="这是卡片的副标题，用于提供更多描述信息">
卡片的主要内容区域，可以包含更详细的信息和其他元素。
</Card>
Card with Image
Add a top image using the imageUrl property:
带图片的卡片
这张卡片展示了如何添加顶部图片
这是一个带有图片的卡片，图片会自动显示在卡片顶部，并适配卡片宽度。
---
/**
* @component Card.WithImage
*
* @description
* 带图片的Card组件示例，展示如何使用imageUrl属性。
*/
import { Card } from '@coffic/cosy-ui';
---
<Card
title="带图片的卡片"
subtitle="这张卡片展示了如何添加顶部图片"
imageUrl="https://picsum.photos/400/200?random=1">
这是一个带有图片的卡片，图片会自动显示在卡片顶部，并适配卡片宽度。
</Card>
Clickable Card
Set the card as a link using the href property:
---
/**
* @component Card.Clickable
*
* @description
* 可点击的Card组件示例，展示如何使用href属性创建链接卡片。
*/
import { Card } from '@coffic/cosy-ui';
---
<Card
title="可点击的卡片"
subtitle="点击整个卡片区域可以跳转到指定链接"
href="#">
这是一个可点击的卡片，鼠标悬停时会有缩放效果，点击可以跳转到指定页面。
</Card>
Compact Mode
Use the compact property to reduce padding:
紧凑卡片
使用compact模式可以减少内边距
这是一个紧凑模式的卡片，适合在空间有限的情况下使用。
---
/**
* @component Card.Compact
*
* @description
* 紧凑模式的Card组件示例，展示如何使用compact属性。
*/
import { Card } from '@coffic/cosy-ui';
---
<Card title="紧凑卡片" subtitle="使用compact模式可以减少内边距" compact>
这是一个紧凑模式的卡片，适合在空间有限的情况下使用。
</Card>
Custom Styles
Customize card styles using the class property:
自定义样式卡片
这个卡片使用了自定义的背景色和边框
这是一个自定义样式的卡片，展示了如何通过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>