Card 卡片

带圆角与细边框的内容容器，可选标题、说明、标题行尾的操作区与页脚。

基础用法

标题、说明、操作区、内容、页脚都是插槽。操作区与标题同一行、靠行尾；页脚横排、垂直居中。

<pt-card>
  <span slot="title">团队成员</span>
  <span slot="description">邀请同事一起编辑这个项目。</span>
  <pt-button slot="actions" variant="ghost" size="sm">管理</pt-button>
  <div>当前有 3 位成员，其中 1 位待接受邀请。</div>
  <pt-button slot="footer" variant="secondary">取消</pt-button>
  <pt-button slot="footer" variant="brand">邀请</pt-button>
</pt-card>

只有内容

没填的部分整块不渲染，也不留它的内边距：只放内容时四周是等宽的留白。

<pt-card>没有标题与页脚的卡片。</pt-card>

插槽

源包的 Card / CardHeader / CardTitle / CardDescription / CardContent / CardFooter 在这里合成一个元素， 各部分用具名插槽填：

插槽	位置	排版
title	头部第一行	16px、600、标题色（text-strong）
description	标题下方，与标题间距 6px	14 / 20、正文色
actions	与标题同一行、靠行尾（RTL 下在左），与标题顶端对齐	—
默认	内容	继承页面，颜色为正文色
footer	底部，横向排列、垂直居中，子元素间距 8px	—

没填的部分整块不渲染，也不留它的内边距。 只放内容时四周是等宽的留白，而不是顶上空出一截标题区； 没有页脚时底部也不会多出一块。后加或移除插槽内容（包括框架里条件渲染的标题）会跟着变。

尺寸与留白

头、内容、页脚各自四周的内边距都是 --pt-card-padding（默认 24px），相邻两块之间只算一份。 宿主是块级元素，宽度随容器；被使用方拉高时（等高网格、固定高度）内容区吃掉多出来的空间，页脚贴底。

定制

• --pt-card-padding：内边距，默认 24px。可以设在容器上让一组卡片统一变紧凑。
• --pt-card-radius：圆角，默认 --pt-radius-12（12px）。
• 圆角、边框、背景都在宿主上：直接给元素写 class="shadow-md" 或 style="background: …"， 效果跟着圆角走。宿主上没有 overflow: hidden，内容里控件的焦点环不会被裁掉； 需要裁切图片之类的内容时自己在元素上加。
• 各部分都开放了 part（base / header / title / description / actions / content / footer）， 可以用 ::part() 改排版。base 只是内部的纵向布局容器，卡片外观（圆角、边框、背景、阴影）在宿主上： 直接给 pt-card 写 class / style，不要写 pt-card::part(base)，否则会叠出第二层边框或方角底色。

无障碍

卡片是纯展示容器，没有角色、不可聚焦。需要把一张卡片作为独立区域让读屏跳转时， 在元素上加 role="region" 与 aria-label（或 aria-labelledby 指向插槽里标题元素的 id）。

API

插槽

名称	说明
（默认）	内容
actions	标题行尾的操作区（按钮、菜单触发器），与标题同一行、靠行尾对齐
description	标题下方的说明文字
footer	页脚，横向排列、垂直居中
title	标题

可定制的内部元素（::part()）

part	说明
actions	操作区容器
base	内部布局容器（纵向 flex，撑满宿主高度）。卡片外观（圆角、边框、背景）在宿主上，直接给 pt-card 写 class / style 改
content	内容容器
description	说明容器
footer	页脚容器
header	头部：标题 + 说明 + 操作区
title	标题容器