可从服务端渲染的 React 卡片，采用 Liquid Glass 表面，包含 header、body 与 footer。
Card 是原生布局原语：它没有交互状态，其余原生属性（包括 style）会透传到根 div。它可在 React Server Component 中渲染，且不支持 render 属性。可以用 ui 调整玻璃层或任意内部区域。
下面的卡片来自真实组件，结构与代码示例一致。
不传 title、description 或 footer 时，对应的区域不会渲染：
Card 是非交互容器，没有自己的角色或状态。请为 title 使用真实标题，或在正文中添加自己的标题，让卡片出现在文档大纲中。
整张卡片需要可点击时，应在标题中放置一个链接或按钮，而不是给根元素添加点击处理函数。标签规范见可访问性指南。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title | ReactNode | — | 卡片标题，渲染为 div。 |
description | ReactNode | — | 标题下方的说明文字。 |
footer | ReactNode | — | 底部操作区。 |
children | ReactNode | — | 卡片主体内容。 |
ref | Ref<HTMLDivElement> | — | 转发到根元素的 ref。 |
className | string | — | 合并到 root，用于布局。 |
style | CSSProperties | — | 内联样式，合并到与 className 相同的元素。 |
ui | { root?: ClassValue; glass?: ClassValue; overlay?: ClassValue; layout?: ClassValue; header?: ClassValue; title?: ClassValue; description?: ClassValue; body?: ClassValue; footer?: ClassValue } | — | 按 data-slot 组织的内部槽位类名。 |
| 属性 | 说明 |
|---|---|
data-slot | 标记内部部件（root、glass、overlay、layout、header、title、description、body、footer），用于样式选择。 |
组件使用共享玻璃材质。可以在父级调整 --ui-glass-* token，用 className 控制布局，并通过 ui 按 data-slot 调整内部槽位。组件级数值位于 src/theme/card.ts。Token 分层与预设见主题指南。