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>
  <p>A minimal card with just the default slot.</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

浅灰填充背景

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

<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

<CfCard variant="elevated">
<template #header>Project settings</template>
<p>Card body goes here.</p>
<template #footer>
  <CfButton size="sm" variant="tertiary">Cancel</CfButton>
  <CfButton size="sm">Save</CfButton>
</template>
</CfCard>

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 也可触发。

<CfCard variant="outlined" interactive @click="clicked++">
<template #header>Whole card clickable</template>
<p>Clicked {{ clicked }} times</p>
</CfCard>

<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