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

background

Background color type, supports all preset background colors and opacity variants.

默认背景

使用默认背景色的卡片

这是使用默认背景色的卡片内容。

主色调背景

使用主色调背景的卡片

这是使用主色调背景的卡片内容。

主色调半透明

使用主色调半透明背景的卡片

这是使用主色调半透明背景的卡片内容。

强调色背景

使用强调色背景的卡片

这是使用强调色背景的卡片内容。

成功色背景

使用成功色背景的卡片

这是使用成功色背景的卡片内容。

警告色背景

使用警告色背景的卡片

这是使用警告色背景的卡片内容。

错误色背景

使用错误色背景的卡片

这是使用错误色背景的卡片内容。

默认背景

使用默认背景色的卡片

这是使用默认背景色的卡片内容。

主色调背景

使用主色调背景的卡片

这是使用主色调背景的卡片内容。

主色调半透明

使用主色调半透明背景的卡片

这是使用主色调半透明背景的卡片内容。

强调色背景

使用强调色背景的卡片

这是使用强调色背景的卡片内容。

成功色背景

使用成功色背景的卡片

这是使用成功色背景的卡片内容。

警告色背景

使用警告色背景的卡片

这是使用警告色背景的卡片内容。

错误色背景

使用错误色背景的卡片

这是使用错误色背景的卡片内容。
---



import { Card } from "@coffic/cosy-ui";
---

<Card title="默认背景" subtitle="使用默认背景色的卡片">
  这是使用默认背景色的卡片内容。
</Card>

---



import { Card } from "@coffic/cosy-ui";
---

<Card title="主色调背景" subtitle="使用主色调背景的卡片" background="primary">
  这是使用主色调背景的卡片内容。
</Card>

---



import { Card } from "@coffic/cosy-ui";
---

<Card
  title="主色调半透明"
  subtitle="使用主色调半透明背景的卡片"
  background="primary/20">
  这是使用主色调半透明背景的卡片内容。
</Card>

---



import { Card } from "@coffic/cosy-ui";
---

<Card title="强调色背景" subtitle="使用强调色背景的卡片" background="accent">
  这是使用强调色背景的卡片内容。
</Card>

---



import { Card } from "@coffic/cosy-ui";
---

<Card title="成功色背景" subtitle="使用成功色背景的卡片" background="success">
  这是使用成功色背景的卡片内容。
</Card>

---



import { Card } from "@coffic/cosy-ui";
---

<Card title="警告色背景" subtitle="使用警告色背景的卡片" background="warning">
  这是使用警告色背景的卡片内容。
</Card>

---



import { Card } from "@coffic/cosy-ui";
---

<Card title="错误色背景" subtitle="使用错误色背景的卡片" background="error">
  这是使用错误色背景的卡片内容。
</Card>

<script setup lang="ts">
import { Card } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Card title="默认背景" subtitle="使用默认背景色的卡片">
        这是使用默认背景色的卡片内容。
    </Card>
</template>

<script setup lang="ts">
import { Card } from '@coffic/cosy-ui/vue';
</script>
<template>
    <Card title="主色调背景" subtitle="使用主色调背景的卡片" background="primary">
        这是使用主色调背景的卡片内容。
    </Card>
</template>

<script setup lang="ts">
import { Card } from '@coffic/cosy-ui/vue';
</script>
<template>
  <Card title="主色调半透明" subtitle="使用主色调半透明背景的卡片" background="primary/20">
    这是使用主色调半透明背景的卡片内容。
  </Card>
</template>

<script setup lang="ts">
import { Card } from '@coffic/cosy-ui/vue';
</script>
<template>
  <Card title="强调色背景" subtitle="使用强调色背景的卡片" background="accent">
    这是使用强调色背景的卡片内容。
  </Card>
</template>


<script setup lang="ts">
import { Card } from '@coffic/cosy-ui/vue';
</script>
<template>
  <Card title="成功色背景" subtitle="使用成功色背景的卡片" background="success">
    这是使用成功色背景的卡片内容。
  </Card>
</template>


<script setup lang="ts">
import { Card } from '@coffic/cosy-ui/vue';
</script>
<template>
  <Card title="警告色背景" subtitle="使用警告色背景的卡片" background="warning">
    这是使用警告色背景的卡片内容。
  </Card>
</template>


<script setup lang="ts">
import { Card } from '@coffic/cosy-ui/vue';
</script>
<template>
  <Card title="错误色背景" subtitle="使用错误色背景的卡片" background="error">
    这是使用错误色背景的卡片内容。
  </Card>
</template>

class

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

自定义样式卡片

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

这是一个自定义样式的卡片，展示了如何通过class属性来覆盖默认样式。

圆角边框卡片

这个卡片使用了自定义的圆角和边框样式

这是一个带有圆角边框的卡片，展示了如何通过class属性来创建独特的视觉效果。

阴影效果卡片

这个卡片使用了自定义的阴影和背景效果

这是一个带有特殊阴影效果的卡片，展示了如何通过class属性来增强视觉层次感。

自定义样式

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

---



/**
 * @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>

---



/**
 * @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>

<script setup lang="ts">
import { Card } from "@coffic/cosy-ui/vue";
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <Card title="自定义样式" subtitle="使用 class 属性自定义样式"
            class="cosy:bg-gradient-to-r cosy:from-blue-500 cosy:to-purple-600 cosy:text-white">
            自定义样式的卡片
        </Card>
    </div>
</template>

<script setup lang="ts">
import { Card } from "@coffic/cosy-ui/vue";
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <Card title="自定义样式" subtitle="使用 class 属性自定义样式"
            class="cosy:bg-gradient-to-r cosy:from-blue-500 cosy:to-purple-600 cosy:text-white">
            自定义样式的卡片
        </Card>
    </div>
</template>

<script setup lang="ts">
import { Card } from "@coffic/cosy-ui/vue";
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <Card title="自定义样式" subtitle="使用 class 属性自定义样式"
            class="cosy:bg-gradient-to-r cosy:from-blue-500 cosy:to-purple-600 cosy:text-white">
            自定义样式的卡片
        </Card>
    </div>
</template>

compact

Whether to use compact mode.

紧凑卡片

使用compact模式可以减少内边距

这是一个紧凑模式的卡片，适合在空间有限的情况下使用。
紧凑图片卡片

紧凑图片卡片

紧凑模式配合图片使用

这是一个带图片的紧凑卡片，在有限空间内展示更多信息。

紧凑模式

compact=true，使用紧凑内边距

紧凑内边距的卡片内容

紧凑模式

compact=true，使用紧凑内边距

紧凑内边距的卡片内容

紧凑模式

compact=true，使用紧凑内边距

紧凑内边距的卡片内容
---



/**
 * @component Card.Compact
 *
 * @description
 * 紧凑模式的Card组件示例，展示如何使用compact属性。
 */
import { Card } from "@coffic/cosy-ui";
---

<Card title="紧凑卡片" subtitle="使用compact模式可以减少内边距" compact>
  这是一个紧凑模式的卡片，适合在空间有限的情况下使用。
</Card>

---



/**
 * @component Card.Compact2
 *
 * @description
 * 紧凑模式的Card组件示例，带图片展示。
 */
import { Card } from "@coffic/cosy-ui";
---

<Card
  title="紧凑图片卡片"
  subtitle="紧凑模式配合图片使用"
  imageUrl="/src/assets/background.svg"
  compact>
  这是一个带图片的紧凑卡片，在有限空间内展示更多信息。
</Card>

---



/**
 * @component Card.Compact3
 *
 * @description
 * 紧凑模式的Card组件示例，作为链接使用。
 */
import { Card } from "@coffic/cosy-ui";
---

<Card title="紧凑链接卡片" subtitle="紧凑模式作为链接使用" href="#" compact>
  这是一个紧凑的链接卡片，点击可以跳转到指定页面。
</Card>

<script setup lang="ts">
import { Card } from "@coffic/cosy-ui/vue";
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <Card title="紧凑模式" subtitle="compact=true，使用紧凑内边距" :compact="true">
            紧凑内边距的卡片内容
        </Card>
    </div>
</template>

<script setup lang="ts">
import { Card } from "@coffic/cosy-ui/vue";
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <Card title="紧凑模式" subtitle="compact=true，使用紧凑内边距" :compact="true">
            紧凑内边距的卡片内容
        </Card>
    </div>
</template>

<script setup lang="ts">
import { Card } from "@coffic/cosy-ui/vue";
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <Card title="紧凑模式" subtitle="compact=true，使用紧凑内边距" :compact="true">
            紧凑内边距的卡片内容
        </Card>
    </div>
</template>

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>

<script setup lang="ts">
import { Card } from "@coffic/cosy-ui/vue";
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <Card title="可点击卡片" subtitle="使用 href 属性使卡片变成链接" href="#">
            点击此卡片可跳转
        </Card>
    </div>
</template>

<script setup lang="ts">
import { Card } from "@coffic/cosy-ui/vue";
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <Card title="可点击卡片" subtitle="使用 href 属性使卡片变成链接" href="#">
            点击此卡片可跳转
        </Card>
    </div>
</template>

<script setup lang="ts">
import { Card } from "@coffic/cosy-ui/vue";
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <Card title="可点击卡片" subtitle="使用 href 属性使卡片变成链接" href="#">
            点击此卡片可跳转
        </Card>
    </div>
</template>

imageUrl

URL of the image displayed at the top of the card or ImageMetadata. Supports both remote image URLs and local image imports.

带图片的卡片

带图片的卡片

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

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

紧凑图片卡片

紧凑模式的图片卡片

这是一个紧凑模式的图片卡片，在有限空间内展示图片和内容。
使用本地图片的卡片

使用本地图片的卡片

这张卡片展示了如何使用本地图片资源

这是一个使用本地图片的卡片示例。通过直接导入图片文件，我们可以获得更好的类型安全和构建时优化。
带图片的卡片

带图片的卡片

使用 imageUrl 属性添加顶部图片

包含图片的卡片内容
带图片的卡片

带图片的卡片

使用 imageUrl 属性添加顶部图片

包含图片的卡片内容
带图片的卡片

带图片的卡片

使用 imageUrl 属性添加顶部图片

包含图片的卡片内容
带图片的卡片

带图片的卡片

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

---



/**
 * @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>

---



/**
 * @component Card.WithLocalImage
 *
 * @description
 * 使用本地图片的Card组件示例，展示如何导入并使用本地图片资源。
 */
import { Card } from "@coffic/cosy-ui";
import bookImage from "@/assets/book.png";
---

<Card
    title="使用本地图片的卡片"
    subtitle="这张卡片展示了如何使用本地图片资源"
    imageUrl={bookImage}>
    这是一个使用本地图片的卡片示例。通过直接导入图片文件，我们可以获得更好的类型安全和构建时优化。
</Card>

<script setup lang="ts">
import { Card } from "@coffic/cosy-ui/vue";
</script>

<template>
  <div style="display: flex; justify-content: center; padding: 1rem">
    <Card
      title="带图片的卡片"
      subtitle="使用 imageUrl 属性添加顶部图片"
      imageUrl="/sample-1.png">
      包含图片的卡片内容
    </Card>
  </div>
</template>

<script setup lang="ts">
import { Card } from "@coffic/cosy-ui/vue";
</script>

<template>
  <div style="display: flex; justify-content: center; padding: 1rem">
    <Card
      title="带图片的卡片"
      subtitle="使用 imageUrl 属性添加顶部图片"
      imageUrl="/sample-1.png">
      包含图片的卡片内容
    </Card>
  </div>
</template>

<script setup lang="ts">
import { Card } from "@coffic/cosy-ui/vue";
</script>

<template>
  <div style="display: flex; justify-content: center; padding: 1rem">
    <Card
      title="带图片的卡片"
      subtitle="使用 imageUrl 属性添加顶部图片"
      imageUrl="/sample-1.png">
      包含图片的卡片内容
    </Card>
  </div>
</template>

<script setup lang="ts">
import { Card } from "@coffic/cosy-ui/vue";
</script>

<template>
  <div style="display: flex; justify-content: center; padding: 1rem">
    <Card
      title="带图片的卡片"
      subtitle="使用 imageUrl 属性添加顶部图片"
      imageUrl="/sample-1.png">
      包含图片的卡片内容
    </Card>
  </div>
</template>

muted

Whether to use muted style (inactive state). When set to true, the card will be displayed with a semi-transparent effect and disabled interaction.

使用muted属性的卡片

这张卡片使用了Container的muted功能

这是一个使用了muted属性的卡片示例。muted属性可以让卡片显示为柔和的样式，适用于未激活或次要内容的展示。

使用muted属性的卡片

这张卡片使用了Container的muted功能

这是一个使用了muted属性的卡片示例。muted属性可以让卡片显示为柔和的样式，适用于未激活或次要内容的展示。
---



/**
 * @component Card.WithMuted
 *
 * @description
 * 使用muted属性的Card组件示例，展示如何使用Container的muted功能。
 */
import { Card } from "@coffic/cosy-ui";
---

<Card
    title="使用muted属性的卡片"
    subtitle="这张卡片使用了Container的muted功能"
    muted>
    这是一个使用了muted属性的卡片示例。muted属性可以让卡片显示为柔和的样式，适用于未激活或次要内容的展示。
</Card>

<script setup lang="ts">
import { Card } from '@coffic/cosy-ui/vue';
</script>
<template>
  <Card title="使用muted属性的卡片" subtitle="这张卡片使用了Container的muted功能" :muted="true">
    这是一个使用了muted属性的卡片示例。muted属性可以让卡片显示为柔和的样式，适用于未激活或次要内容的展示。
  </Card>
</template>

shadow

Shadow size, optional values: none, sm, md, lg, xl, 2xl.

无阴影卡片

这是一个没有阴影效果的卡片

卡片内容

小阴影卡片

这是一个具有小阴影效果的卡片

卡片内容

中等阴影卡片

这是一个具有中等阴影效果的卡片

卡片内容

大阴影卡片

这是一个具有大阴影效果的卡片

卡片内容

超大阴影卡片

这是一个具有超大阴影效果的卡片

卡片内容

双重阴影卡片

这是一个具有双重阴影效果的卡片

卡片内容

无阴影卡片

这是一个没有阴影效果的卡片

卡片内容

小阴影卡片

这是一个具有小阴影效果的卡片

卡片内容

中等阴影卡片

这是一个具有中等阴影效果的卡片

卡片内容

大阴影卡片

这是一个具有大阴影效果的卡片

卡片内容

超大阴影卡片

这是一个具有超大阴影效果的卡片

卡片内容

双重阴影卡片

这是一个具有双重阴影效果的卡片

卡片内容

---



import { Card } from "@coffic/cosy-ui";
---

<Card shadow="none" title="无阴影卡片" subtitle="这是一个没有阴影效果的卡片">
    <p>卡片内容</p>
</Card>

---



import { Card } from "@coffic/cosy-ui";
---

<Card shadow="sm" title="小阴影卡片" subtitle="这是一个具有小阴影效果的卡片">
    <p>卡片内容</p>
</Card>

---



import { Card } from "@coffic/cosy-ui";
---

<Card
    shadow="md"
    title="中等阴影卡片"
    subtitle="这是一个具有中等阴影效果的卡片">
    <p>卡片内容</p>
</Card>

---



import { Card } from "@coffic/cosy-ui";
---

<Card shadow="lg" title="大阴影卡片" subtitle="这是一个具有大阴影效果的卡片">
    <p>卡片内容</p>
</Card>

---



import { Card } from "@coffic/cosy-ui";
---

<Card
    shadow="xl"
    title="超大阴影卡片"
    subtitle="这是一个具有超大阴影效果的卡片">
    <p>卡片内容</p>
</Card>

---



import { Card } from "@coffic/cosy-ui";
---

<Card
    shadow="2xl"
    title="双重阴影卡片"
    subtitle="这是一个具有双重阴影效果的卡片">
    <p>卡片内容</p>
</Card>

<template>
  <Card shadow="none" title="无阴影卡片" subtitle="这是一个没有阴影效果的卡片">
    <p>卡片内容</p>
  </Card>
</template>

<script setup lang="ts">
import { Card } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Card shadow="sm" title="小阴影卡片" subtitle="这是一个具有小阴影效果的卡片">
    <p>卡片内容</p>
  </Card>
</template>

<script setup lang="ts">
import { Card } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Card
    shadow="md"
    title="中等阴影卡片"
    subtitle="这是一个具有中等阴影效果的卡片">
    <p>卡片内容</p>
  </Card>
</template>

<script setup lang="ts">
import { Card } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Card shadow="lg" title="大阴影卡片" subtitle="这是一个具有大阴影效果的卡片">
    <p>卡片内容</p>
  </Card>
</template>

<script setup lang="ts">
import { Card } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Card
    shadow="xl"
    title="超大阴影卡片"
    subtitle="这是一个具有超大阴影效果的卡片">
    <p>卡片内容</p>
  </Card>
</template>

<script setup lang="ts">
import { Card } from "@coffic/cosy-ui/vue";
</script>

<template>
  <Card
    shadow="2xl"
    title="双重阴影卡片"
    subtitle="这是一个具有双重阴影效果的卡片">
    <p>卡片内容</p>
  </Card>
</template>

<script setup lang="ts">
import { Card } from "@coffic/cosy-ui/vue";
</script>

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>

<script setup lang="ts">
import { Card } from "@coffic/cosy-ui/vue";
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <Card title="带副标题的卡片" subtitle="这是一个详细的副标题描述，用于说明卡片的主要内容">
            卡片内容区域
        </Card>
    </div>
</template>

<script setup lang="ts">
import { Card } from "@coffic/cosy-ui/vue";
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <Card title="带副标题的卡片" subtitle="这是一个详细的副标题描述，用于说明卡片的主要内容">
            卡片内容区域
        </Card>
    </div>
</template>

<script setup lang="ts">
import { Card } from "@coffic/cosy-ui/vue";
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <Card title="带副标题的卡片" subtitle="这是一个详细的副标题描述，用于说明卡片的主要内容">
            卡片内容区域
        </Card>
    </div>
</template>

title

Card title.

基础卡片

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

默认模式

compact=false，使用默认内边距

默认内边距的卡片内容
---



/**
 * @component Card.Basic
 *
 * @description
 * 基础Card组件示例，展示最简单的卡片用法。
 */
import { Card } from "@coffic/cosy-ui";
---

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

<script setup lang="ts">
import { Card } from "@coffic/cosy-ui/vue";
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <Card title="默认模式" subtitle="compact=false，使用默认内边距" :compact="false">
            默认内边距的卡片内容
        </Card>
    </div>
</template>

Slots

default

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

基础卡片

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

默认模式

compact=false，使用默认内边距

默认内边距的卡片内容
---



/**
 * @component Card.Basic
 *
 * @description
 * 基础Card组件示例，展示最简单的卡片用法。
 */
import { Card } from "@coffic/cosy-ui";
---

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

<script setup lang="ts">
import { Card } from "@coffic/cosy-ui/vue";
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <Card title="默认模式" subtitle="compact=false，使用默认内边距" :compact="false">
            默认内边距的卡片内容
        </Card>
    </div>
</template>

搜索