logo
English

导航菜单

Documents

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

Cases

Basic

Card with Image

Card with Image

This card includes an image at the top.

The image is displayed above the title and subtitle.

Multiple Cards

Product A

Product A

A short description of Product A.

Product B

Product B

A short description of Product B.

Product C

Product C

A short description of Product C.

Props

class

Custom CSS class that can be used to override default styles.

自定义样式卡片

这个卡片使用了自定义的背景色和边框

这是一个自定义样式的卡片，展示了如何通过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

Whether to use compact mode.

紧凑卡片

使用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

If provided, the card will become a clickable link.

---
/**
 * @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 of the image displayed at the top of the card.

带图片的卡片

带图片的卡片

这张卡片展示了如何添加顶部图片

这是一个带有图片的卡片，图片会自动显示在卡片顶部，并适配卡片宽度。
紧凑图片卡片

紧凑图片卡片

紧凑模式的图片卡片

这是一个紧凑模式的图片卡片，在有限空间内展示图片和内容。 
---
/**
 * @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

Card subtitle or description.

带副标题的卡片

这是卡片的副标题，用于提供更多描述信息

卡片的主要内容区域，可以包含更详细的信息和其他元素。

紧凑副标题卡片

紧凑模式下的副标题卡片，适合空间有限的情况

这是一个紧凑模式的副标题卡片，在有限空间内展示标题、副标题和内容。 
---
/**
 * @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 title.

基础卡片

这是一个基础的卡片内容，展示了Card组件的最简单用法。 
---
/**
 * @component Card.Basic
 *
 * @description
 * 基础Card组件示例，展示最简单的卡片用法。
 */
import { Card } from '@coffic/cosy-ui';
---

<Card title="基础卡片">
  这是一个基础的卡片内容，展示了Card组件的最简单用法。
</Card>

Slots

default

Card content slot, used to place additional content below the subtitle.

基础卡片

这是一个基础的卡片内容，展示了Card组件的最简单用法。 
---
/**
 * @component Card.Basic
 *
 * @description
 * 基础Card组件示例，展示最简单的卡片用法。
 */
import { Card } from '@coffic/cosy-ui';
---

<Card title="基础卡片">
  这是一个基础的卡片内容，展示了Card组件的最简单用法。
</Card>

搜索