Card

通用卡片容器。承载分组内容（信息块、列表条目、媒体卡等）；层次靠 border + surface 背景 + 圆角表达，无 elevation / box-shadow。纯展示容器，不做整卡可点击。

基础

默认 outlined

surface 背景 + subtle 边框，无阴影。

<script setup lang="ts">
import { HCard } from 'happier-ui'
</script>

<template>
  <h-card>
    卡片正文
  </h-card>
</template>

变体

variant=outlined

outlined：白底描边；filled：次级表面无边；flat：透明无边。

variant=filled

outlined：白底描边；filled：次级表面无边；flat：透明无边。

variant=flat

outlined：白底描边；filled：次级表面无边；flat：透明无边。

<h-card variant="outlined">outlined</h-card>
<h-card variant="filled">filled</h-card>
<h-card variant="flat">flat</h-card>

Header / Footer 组合

标题区

正文内容。outlined / filled 下 header 与 body 之间有分隔线。

filled + header

仅 header + body。

flat 无分隔线

flat 变体只用间距分隔分区，不画线。

页脚

<h-card>
  <template #header>标题</template>
  正文
  <template #footer>
    <h-button size="sm">操作</h-button>
  </template>
</h-card>

Padding / Radius

padding=none

padding=sm

padding=md

padding=lg

radius=sm

radius=md

API

Props

名称	类型	默认	说明
variant	'outlined' | 'filled' | 'flat'	'outlined'	视觉变体：描边 / 填充 / 扁平
padding	'none' | 'sm' | 'md' | 'lg'	'md'	各分区内边距（映射 --h-space-*；none 为 0）
radius	'sm' | 'md'	'md'	圆角（sm=--h-radius-sm，md=--h-radius-md）

Slots

名称	说明
header	顶部区；缺省不渲染容器
default	正文（body）
footer	底部区；缺省不渲染容器

Emits

无。

无障碍

• 根节点为语义 <article>（内容分组）
• 纯展示容器：无整卡焦点环、无 clickable / disabled
• 卡内交互由宿主放置的控件（如 HButton）自带 :focus-visible