Card 设计文档

卡片容器：header(headerExtraContent + title，或 header 覆盖) → cover(出血) → body(children，loading 时 Skeleton 占位 + actions 底部操作) → footer。bordered/shadows 控制视觉；string title 用 Typography.Title heading=6 渲染并经 aria-labelledby 关联。

← API 文档

使用建议

Accessibility

有 title 时根 role=region；string title 经 useId 关联 aria-labelledby（无 aria-label 时）；loading 时根 aria-busy；Skeleton 占位自带 role=status/aria-busy。

设计变量

color

font

other

radius

spacing

width

变量	默认值	用法
--cd-card-bg	var(--cd-color-card-bg-default)	卡片根背景（组件消费）
--cd-card-body-color	var(--cd-color-card-body-text)	body 正文文字（组件消费）
--cd-card-border-color	var(--cd-color-card-border)	卡片外框/头尾分隔线颜色（组件消费）
--cd-card-desc-color	var(--cd-color-card-description-text)	Meta 描述文字（组件消费）
--cd-card-extra-color	var(--cd-color-card-extra-text)	header 右侧 extra 文字（组件消费）
--cd-card-title-color	var(--cd-color-card-title-text)	Meta 标题文字（组件消费）
--cd-color-card-bg-default	var(--cd-color-bg-0)	卡片背景颜色（Semi $color-card-bg-default）
--cd-color-card-body-text	var(--cd-color-text-1)	卡片正文文字颜色（Semi $color-card_body-text）
--cd-color-card-border	var(--cd-color-border)	卡片描边颜色（Semi $color-card-border）
--cd-color-card-description-text	var(--cd-color-text-2)	卡片描述文字颜色（Semi $color-card_description-text）

显示第 1 条-第 10 条，共 12 条