logo
简体中文

导航菜单

文档

astro
card

Card

简介

Card组件用于在页面中展示相关内容的容器，通常包含标题、描述和可选的图片。组件设计简洁大方，具有平滑的动画效果和交互反馈，适合展示产品、文章或功能介绍等内容。

组件特性：

  • 支持图片展示，自动适配尺寸
  • 可设置为可点击的链接卡片
  • 提供紧凑模式，适应不同空间需求
  • 平滑的悬停动画效果
  • 响应式设计，适配不同屏幕尺寸

案例

基础卡片

Card with Image

Card with Image

This card includes an image at the top.

The image is displayed above the title and subtitle.

多卡片展示

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

背景色类型，支持所有预设背景色和透明度变体。

默认背景

使用默认背景色的卡片

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

主色调背景

使用主色调背景的卡片

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

主色调半透明

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

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

强调色背景

使用强调色背景的卡片

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

成功色背景

使用成功色背景的卡片

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

警告色背景

使用警告色背景的卡片

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

错误色背景

使用错误色背景的卡片

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

默认背景

使用默认背景色的卡片

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

主色调背景

使用主色调背景的卡片

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

主色调半透明

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

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

强调色背景

使用强调色背景的卡片

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

成功色背景

使用成功色背景的卡片

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

警告色背景

使用警告色背景的卡片

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

错误色背景

使用错误色背景的卡片

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



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

自定义CSS类，可用于覆盖默认样式。

自定义样式卡片

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

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

是否使用紧凑模式。

紧凑卡片

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

如果提供，卡片将变成可点击的链接。

---



/**
 * @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或ImageMetadata。支持远程图片URL和本地图片导入。

带图片的卡片

带图片的卡片

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

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

紧凑图片卡片

紧凑模式的图片卡片

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

使用本地图片的卡片

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

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

带图片的卡片

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

是否使用柔和色样式（未激活状态），设置为 true 时卡片会呈现半透明效果并禁用交互。

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

阴影大小，可选值：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

卡片副标题或描述。

带副标题的卡片

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

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

紧凑副标题卡片

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

这是一个紧凑模式的副标题卡片，在有限空间内展示标题、副标题和内容。

带副标题的卡片

这是一个详细的副标题描述，用于说明卡片的主要内容

卡片内容区域

带副标题的卡片

这是一个详细的副标题描述，用于说明卡片的主要内容

卡片内容区域

带副标题的卡片

这是一个详细的副标题描述，用于说明卡片的主要内容

卡片内容区域
---



/**
 * @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组件的最简单用法。

默认模式

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组件的最简单用法。

默认模式

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>

搜索