Card 设计文档

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

使用建议

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

Accessibility

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

设计变量

变量	默认值	用法
`--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）