# Card 卡片用于承载一组相关内容的信息容器。 ## 基础用法

这是一张基础卡片，展示一组摘要信息。

内容区支持任意自定义结构。

## 无标题

省略 title 属性时，仅保留内容区。

## 可悬浮

将鼠标移入卡片，可看到阴影过渡效果。

## 扩展区

通过 extra 插槽在标题右侧放置操作。

新建

## 封面图 `cover-src` 属性或 `cover` 插槽可在卡片顶部放一张全宽封面图（object-fit: cover 自适应裁切）。

沿江 15 公里休闲骑行线路，周末出发正合适。

周末两日轻装徒步路线推荐，无需露营装备。

## 封面 + 操作区（商品卡）底部 `actions` 插槽放按钮组，上方自动带分隔线。

主动降噪 · 30 小时续航 · 蓝牙 5.3

¥ 899

查看详情

加入购物车

## 可点击（clickable） `clickable` 整卡可点：可聚焦、Enter/Space 触发 `oas-click`，焦点环随键盘聚焦出现。点击操作区内的按钮不会触发整卡点击。

点击整卡或按 Enter/Space 触发 oas-click。

点卡片主体触发整卡点击；点右下按钮走各自操作。

邀请成员

归档

## 可选中卡（selectable） `selectable` 让整卡可点选切换选中态——适合图片/标题/描述/操作区俱全的大卡片做多选。选中态为 primary 描边 + 浅 primary 底 + 右上勾选角标；点击卡内的按钮/链接等交互元素不会触发选中；键盘 Space/Enter 同样生效。单卡缺省不挂 `role`：可点/可选卡内常嵌操作按钮或链接，挂交互角色会把卡内控件裹进交互元素（屏幕阅读器丢失内部控件可读性），组件仅保留 `tabindex` 保证键盘可达；**多卡组需要单选/多选语义时**，由宿主在卡片上显式挂 `role="radio"`（或 `role="checkbox"`）并自行管理互斥选中——组件不覆盖宿主显式角色，只叠加 `aria-checked` 同步。宿主不设 `selected` 时组件内部切换并反射属性（非受控）；设了 `selected` 即受控——组件只派发 `oas-change`（detail 为 `{ selected }`，切换后的新状态），选中态由宿主监听回写。`loading` 骨架态不可选；与 `href` 同设时点选优先于跳转（卡内显式链接/按钮仍走各自操作）。

已选 0 项

轻量起步，适合小团队验证想法。

查看详情

标准协作套件，含自动化工作流。

查看详情

企业级管控，私有部署与审计。

查看详情

5 人以内 · 基础看板

不限人数 · 自动化流程

私有部署 · 审计日志

## 加载骨架（loading） `loading` 时内容区切换为骨架占位（微光动画），正文隐藏；宿主同步 `aria-busy`。

数据加载完成后展示正文。

切换 loading

## 紧凑尺寸（size） `size="small"` 收紧内边距与标题字号，适合信息密度高的列表场景；默认 `medium`。

更小的内边距与标题字号。

查看

## 紧凑密度（density） `density="compact"` 是独立于 `size` 的布局密度档：同时收紧卡片内各分区的内边距与间距（比 `size="small"` 更紧），适合信息密集的看板、列表与设置面板；默认 `default`。与 `size`（字号刻度）正交，可叠加使用。

内边距与各分区间距同时收紧，信息密度更高。

查看

默认档位下的常规内边距与间距。

查看

## 无边框形态（variant） `variant="borderless"` 去掉容器描边，适合嵌套在卡片内做设置分组；默认 `outlined`。

接收被提及、指派与评论回复的提醒。

每周一汇总发送项目动态摘要。

## 底条（footer） `footer` 插槽是独立于操作区的任意底栏：放补充说明、元信息；`actions` 仍是按钮操作区。

我们更新了数据处理条款，请确认后继续。

同意并继续

更新于 2026-09-01 · 适用于全部工作区

## 标题分割线（header-bordered）标题区底部分割线默认显示；`header-bordered="false"` 关闭。

标题与内容之间保留分隔线。

标题紧贴内容，适合轻量分组。

## 阴影三态（shadow） `shadow="none | hover | always"`：悬浮阴影、常显阴影或无阴影。`hoverable` 布尔等价于 `shadow="hover"`（旧用法保持兼容）；显式 `shadow` 声明优先于 `hoverable`。

阴影始终存在，突出层级。

移入时阴影 + 上浮（hoverable 同款）。

## 用户卡（Meta） `slot="avatar"` 在标题左侧放头像；`description` 属性（或 `slot="description"`）在标题下方放一行次级小字。两者任一在场时，标题区自动变为「头像 + 标题 + 副文案」形态。

林晓

关注

负责组件库架构与渲染性能优化，最近在研究 SSR 水合。

组件

性能

## 链接卡（href） `href` 单独即生效（无需 `clickable`）：整卡语义为链接，内部锚点承载地址，焦点与键盘 Enter 都由锚点原生支持；`target` 一并透传。点击卡片内嵌的按钮/链接仍走各自操作，不会误触发整卡跳转。

点击卡片任意处跳转（键盘 Enter 同样生效）。

新标签页打开，带 target 透传。

## 组合：标签页卡片内可以组合其他组件，例如 `oas-tabs` 做「设置中心」式分区。

项目名称、可见范围与默认语言。

邀请成员并按角色分配权限。

归档策略、Webhook 与 API 访问令牌。

## 栅格卡宿主 grid 均分卡内块：卡片只负责容器，布局交给宿主 CSS grid。

进行中项目

已完成交付

96%

按期率

## 看板卡与 `oas-statistic` 组合成数据看板。

今日访问量

错误率

在线会话

## 电商图卡封面图 + 价格区 + 操作区 + 底条的典型商品卡组合。

便携机械键盘

¥ 429 ~~¥ 599~~

三模连接 · 热插拔 · Gasket 结构

加入购物车

满 299 包邮 · 7 天无理由退换

## 禁用卡（disabled） `disabled` 禁用整卡：灰化呈现（含 dark 自动适配）、宿主同步 `aria-disabled`、不派发交互事件——`clickable` 的 `oas-click`、`selectable` 的选中切换与 `oas-change` 全部停摆；`href` 链接卡同时摘除内部锚点地址（原生导航一并失效）。卡内自带的按钮/链接等控件的自身行为不受本属性影响（控件有自己的 disabled）。

点击弹出消息。

点击无任何反馈（oas-click 停派）。

保留选中视觉，但不可再切换。

## 横向布局（orientation） `orientation="horizontal"` 把封面移到左侧、标题/内容/操作区收进右侧内容列：封面列占 40% 宽并撑满卡片高度（图片不再锁 16:9），适合新闻条目、商品横条等横向空间充足的场景。默认 `vertical`（封面在顶部的纵向堆叠，现状）。

封面在左，标题与内容在右，操作区仍在底部。

阅读全文

封面在顶部全宽铺开（现状默认）。

## API ### oas-card #### 属性 | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | `clickable` | 整卡可点（focusable，点击/Enter/Space 派发 `oas-click`） | `boolean` | — | | `cover-alt` | 封面图 alt 文本（无障碍） | `string` | — | | `cover-src` | 封面图 URL，置于卡片顶部（object-fit: cover 自适应裁切） | `string` | — | | `density` | 密度档位：`default`（默认）/ `compact`（内边距与分区间距同时收紧，比 `size="small"` 更紧，适合信息密集型场景；与 `size` 正交，可叠加） | — | — | | `description` | Meta 副文（title 下方弱化小字；与 description 插槽双通道，slot 优先） | `string` | — | | `disabled` | 禁用整卡：灰化 + aria-disabled + 停派交互事件 + href 摘链（已选视觉保留） | `boolean` | — | | `header-bordered` | 头部分割线（默认 true；`"false"` 关闭） | — | — | | `hoverable` | 是否开启悬浮阴影（阴影 + 上浮提升 + 指针） | `boolean` | — | | `href` | 链接卡：整卡语义为链接（内部锚点包装，键盘/中键原生可达） | `string` | — | | `loading` | 加载态：内容区切骨架占位（aria-busy 同步） | `boolean` | — | | `orientation` | `horizontal` 封面左置（40% 宽撑满高）+ 内容列右置 | `string` | — | | `selectable` | 可选中卡：点击整卡（或 Enter/Space）切换选中态，派发 `oas-change`；卡内按钮/链接等交互元素不触发选中；与 `href` 同设时点选优先、不跳转；loading 骨架态不可选 | `boolean` | — | | `selected` | 选中态（配合 `selectable`）：宿主设置即为受控——组件只派发 `oas-change` 不自改属性，宿主监听回写；未设置时组件内部切换并反射该属性（非受控） | `boolean` | — | | `shadow` | 阴影三态：`none` / `hover`（悬停浮起）/ `always`（常显）；`hoverable` 映射 `hover`，显式 shadow 优先 | `string` | — | | `size` | 尺寸档位：`small`（紧凑 padding、标题降档）/ `medium`（默认） | — | — | | `target` | 链接卡打开目标（配合 href，如 `_blank`） | `string` | — | | `title` | 卡片标题（渲染进可见标题区；读取后即从宿主移除，不残留原生悬浮提示；清空传空串）；富内容用 slot="title" | `string` | — | | `variant` | 形态：`outlined`（默认，带描边）/ `borderless`（无边框嵌入形态） | — | — | #### 事件 | 事件 | 说明 | | --- | --- | | `oas-change` | 选中态切换（`selectable` 时），detail 为 `{ selected }`（切换后的新状态） | | `oas-click` | 整卡点击（`clickable` 时），detail 含 originalEvent | #### 插槽 | 名称 | 说明 | | --- | --- | | 默认 | 卡片内容 | | `actions` | 底部操作区（查看/编辑/删除等按钮组），上方带分隔线 | | `avatar` | Meta 头像位（header 左置，配合 description 成「头像+标题+副文」形态） | | `cover` | 自定义封面内容（与 `cover-src` 二选一，`cover-src` 优先） | | `description` | Meta 副文富内容（与 description 属性互斥，slot 优先） | | `extra` | 标题右侧扩展区 | | `footer` | 独立底条（与 actions 操作区分离） | | `title` | 标题富内容插槽，有内容时覆盖 title 属性文案 | #### CSS 变量 | CSS 变量 | 默认值 | | --- | --- | | `--oas-skeleton-color` | `var(--oas-color-bg-hover)` | | `--oas-skeleton-duration` | `1.5s` | | `--oas-skeleton-sheen` | `var(--oas-color-border)` |