Preview Updated 2026-05-10

Card

Card container — 3 variants, optional whole-card interaction, and a header / body / footer three-part structure.

Basic usage

The simplest Card just renders the default slot (Vue) / children (React), wrapping content in a bordered container.

背景

最简卡片，只渲染默认插槽。适合放一段说明文字或简单数据块。

<script setup lang="ts">
import { CfCard } from '@chufix-design/vue';
</script>

<template>
  <CfCard style="max-width: 22rem;">
    <p style="margin: 0;">最简卡片，只渲染默认插槽。适合放一段说明文字或简单数据块。</p>
  </CfCard>
</template>

import { CfCard } from '@chufix-design/react';

export default function Demo() {
return (
  <CfCard>
    <p>A minimal card that just renders children.</p>
  </CfCard>
);
}

Variants

Three variants for different information levels: outlined (default border) / elevated (with shadow) / filled (light gray fill).

背景

outlined

默认描边卡片

elevated

带阴影抬升

filled

浅灰填充背景

<script setup lang="ts">
import { CfCard } from '@chufix-design/vue';
</script>

<template>
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; width: 100%;">
    <CfCard variant="outlined">
      <strong>outlined</strong>
      <p class="demo-hint" style="margin: 0.4rem 0 0;">默认描边卡片</p>
    </CfCard>
    <CfCard variant="elevated">
      <strong>elevated</strong>
      <p class="demo-hint" style="margin: 0.4rem 0 0;">带阴影抬升</p>
    </CfCard>
    <CfCard variant="filled">
      <strong>filled</strong>
      <p class="demo-hint" style="margin: 0.4rem 0 0;">浅灰填充背景</p>
    </CfCard>
  </div>
</template>

<CfCard variant="outlined">…</CfCard>
<CfCard variant="elevated">…</CfCard>
<CfCard variant="filled">…</CfCard>

Three-part structure

Vue uses named slots header / footer; React uses subcomponents CardHeader / CardBody / CardFooter. Any section is optional.

背景

这是一段卡片正文，介绍当前项目的基本信息。

上次更新：2026-05-08

<script setup lang="ts">
import { CfButton, CfCard } from '@chufix-design/vue';
</script>

<template>
  <CfCard variant="elevated" style="max-width: 22rem;">
    <template #header>项目设置</template>
    <p style="margin: 0;">这是一段卡片正文，介绍当前项目的基本信息。</p>
    <p style="margin: 0.6rem 0 0; color: var(--fg-2); font-size: 0.85rem;">
      上次更新：2026-05-08
    </p>
    <template #footer>
      <CfButton size="sm" variant="tertiary">取消</CfButton>
      <CfButton size="sm">保存</CfButton>
    </template>
  </CfCard>
</template>

import { CfButton, CfCard, CfCardHeader, CfCardBody, CfCardFooter } from '@chufix-design/react';

export default function Demo() {
return (
  <CfCard variant="elevated">
    <CfCardHeader>Project settings</CfCardHeader>
    <CfCardBody>
      <p>Card body goes here.</p>
    </CfCardBody>
    <CfCardFooter>
      <CfButton size="sm" variant="tertiary">Cancel</CfButton>
      <CfButton size="sm">Save</CfButton>
    </CfCardFooter>
  </CfCard>
);
}

Whole-card clickable

Enabling interactive turns the entire card into a button — role="button" + tabindex="0" are added automatically, and pressing Enter triggers click.

背景

把 interactive 打开后，整张卡片成为按钮。键盘 Enter 也可触发。

<script setup lang="ts">
import { ref } from 'vue';
import { CfCard } from '@chufix-design/vue';

const clicked = ref(0);
</script>

<template>
  <CfCard
    variant="outlined"
    interactive
    style="max-width: 22rem;"
    @click="clicked++"
  >
    <template #header>整卡可点击</template>
    <p style="margin: 0;">把 <code>interactive</code> 打开后，整张卡片成为按钮。键盘 Enter 也可触发。</p>
    <template #footer>
      已点击 <strong>{{ clicked }}</strong> 次
    </template>
  </CfCard>
</template>

<CfCard variant="outlined" interactive onClick={() => setClicked(c => c + 1)}>
<CfCardHeader>Whole card clickable</CfCardHeader>
<CfCardBody>Clicked {clicked} times</CfCardBody>
</CfCard>

API

Prop	Type	Default	Description
`variant`	`'outlined' \| 'elevated' \| 'filled'`	`'outlined'`	Visual variant
`interactive`	`boolean`	`false`	Turn the card into a button (focus / hover)
`as`	`string` (Vue)	`'div'`	HTML tag to render