Card

一张卡的表面与图文排法归它：变体、画面（media）、标题行、叠层与状态描边。放进 CardList 时选中、高亮与悬停效果由列表经上下文逐项传下来，插槽里直接写 <XCard>，不必逐项绑定。

变体

elevated 带投影（列表里的卡）、outlined 只描边（缺省）、dashed 虚线占位（「新建」入口）、plain 不画表面（纯图墙、行视图）。title / subtitle 是属性也是同名插槽，actions 插槽在标题行右侧；padding 三档（none / sm / md）。as 换根元素，整卡是按钮或链接时给 button / a。

变体、标题行与操作

elevated

带投影,列表里的卡

outlined

只描边(缺省)

plain

不画表面,纯图墙、行视图

带操作title / subtitle 属性,actions 插槽在标题行右侧

默认插槽是正文,排在标题下面。

无画面时根是块级、padding 在根上，只当容器用也可以：

紧凑卡片：padding="sm"。

画面与叠层

media 插槽放画面（图、视频、缩略图），宽高比由宿主定——瀑布流按素材比例、宫格按固定比例。文字缺省排在画面下方，此时 padding 只作用于文字区。

overlay 把文字与操作叠到画面上（Bootstrap card-img-overlay、Vuetify image、MUI ImageListItemBar 同类）：hover 在悬停、键盘聚焦或 active 时露出，always 一直叠着；操作在右上角、文字在底部。scrim 定压暗档位：edges 上下压暗（缺省，托住顶部操作与底部文字）、top 只压顶部、dim 整体压暗并轻微模糊、none。

画面下方 / 悬停叠层 / 常驻叠层与压暗档位

晨光文字在画面下方

海风悬停露出

暮色一直叠着 · scrim=top

深夜scrim=dim

状态

hover：lift 上浮 + 描边、ring 只描边、tint 底色加深（行视图）、none；缺省取所在列表给的，单用时看 interactive（等同 lift 并给指针手势）。
selected 主色描边，active（当前打开的、菜单开着的、正在改名的）描边淡一档。在列表里由列表给，这两个属性只给单用的卡。

选中 / 高亮 / 悬停的描边画在 ::before 上：不占布局、圆角跟着、在滚动容器边上不被裁。所在列表可多选时，卡片左上角画勾选圈，点它的手势归列表。

四种悬停效果、选中、高亮与整卡链接

active高亮:描边淡一档

interactive等同 hover=lift + 指针

as=a整卡是链接

API

Props

名称	类型	默认值	说明
`as`	`string \| undefined`	`"div"`	根元素(整卡是链接时给 `a`)
`variant`	`"outlined" \| "elevated" \| "dashed" \| "plain" \| undefined`	`"outlined"`	`elevated` 带投影(列表里的卡)、`outlined` 只描边(缺省)、`dashed` 虚线占位(「新建」)、`plain` 不画表面(纯图墙、行视图)
`padding`	`"md" \| "none" \| "sm" \| undefined`	`"md"`	文字区的内边距;有 `media` 时只作用于画面下方的文字区
`interactive`	`boolean \| undefined`	`false`	整卡可点:等同 `hover: 'lift'` 并给指针手势
`hover`	`"lift" \| "none" \| "ring" \| "tint" \| undefined`	`undefined`	悬停效果:`lift` 上浮 + 描边、`ring` 只描边、`tint` 底色加深(行视图)、`none`。缺省取所在列表给的(`useListItemContext`),不在列表里时看 `interactive`
`selected`	`boolean \| undefined`	`undefined`	选中:主色描边。在列表里由列表给,这里只给单用的卡
`active`	`boolean \| undefined`	`undefined`	高亮(当前打开的、菜单开着的、正在改名的):描边淡一档,`overlay: 'hover'` 的叠层保持露出
`title`	`string \| undefined`	`undefined`	—
`subtitle`	`string \| undefined`	`undefined`	—
`overlay`	`"hover" \| "always" \| undefined`	`undefined`	有 `media` 时文字放哪:缺省在画面下方;`hover` 悬停(或聚焦、高亮)时叠在画面上,`always` 一直叠着 (Bootstrap 的 card-img-overlay、Vuetify 的 `image`、MUI 的 ImageListItemBar)
`scrim`	`"edges" \| "none" \| "top" \| "dim" \| undefined`	`"edges"`	叠层的压暗:`edges` 上下压暗(托住顶部操作与底部文字)、`top` 只压顶部、`dim` 整体压暗并轻微模糊、`none`

Slots

插槽	说明
`default`	—
`media`	画面(图、视频、缩略图);卡片按它的宽高排,宽高比由宿主定
`title`	—
`subtitle`	—
`actions`	操作按钮:有画面且叠层时在右上角,否则在标题行右侧
`footer`	卡片底部(画面或正文之后)