For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/components/card.md.
A3S UI
  • 简体中文
  • next

      • 卡片

      卡片把一组可以独立理解的内容与少量相关操作组织在同一边界内。边界服务于信息分组，不应成为页面的默认容器。

      实时预览

      等待开始审查

      0.4.0 发布准备

      汇总当前版本最重要的交付信号。

      需要审查
      检查
      24 / 26 通过
      阻塞项
      2 项
      目标环境
      生产

      用法

      导入完整样式包，或按需导入卡片结构与视觉样式。

      @import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/card.css";
@import "@a3s-lab/ui/styles/a3s.css";

      根据内容语义选择根元素。独立条目使用 <article>，普通布局分组可以使用 <div>；不要为了获得外观改变内容本身的标题层级。

      <article class="card" aria-labelledby="release-title">
  <header>
    <h2 id="release-title">发布准备</h2>
    <p>汇总当前版本最重要的交付信号。</p>
  </header>
  <section>
    <p>24 / 26 项检查已通过。</p>
  </section>
  <footer>
    <button type="button" class="btn">开始审查</button>
  </footer>
</article>

      HTML 结构

      元素或属性必填用途
      .card是卡片根边界
      直接子 header推荐标题、说明与头部操作
      h2、h3 或 [data-title]推荐与页面层级一致的标题
      .card-action否一个紧邻标题的状态或低频操作
      直接子 section推荐主内容
      直接子 footer否与当前内容直接相关的操作
      data-size="sm"否高密度列表或侧栏中的紧凑间距

      状态与变体

      紧凑卡片

      小尺寸只改变密度，不降低信息完整性。适合侧栏摘要、检查结果或窄列表；触控界面中的按钮仍保持足够目标尺寸。

      实时预览

      Gateway

      最后验证于 2 分钟前

      正常

      所有入口均通过健康检查。

      媒体

      只有图片本身提供理解内容所需的信息时才放入卡片。图像保持真实宽高比并提供替代文本；装饰图使用空 alt。不要用无关封面填补空白。

      实时预览
      A3S 工作区界面预览

      工作区界面

      检查导航、内容画布和审查面板的组合。

      卡片本身不是选择控件，也没有统一的禁用状态。需要整卡导航时使用一个覆盖明确内容的链接模式；需要多选时在卡片内放置具名复选框，并让集合拥有选择状态。不要同时给整个卡片和内部操作添加冲突的点击行为。

      RTL

      卡片使用逻辑内外边距，标题操作会随文本方向移动。图片、图表和产品 Logo 不镜像；有方向含义的箭头由宿主单独翻转。

      可访问性

      卡片不是独立 ARIA 角色。使用 article、section 或普通 div 取决于内容语义，并用页面层级正确的标题帮助导航。不要让整卡点击区域吞掉内部链接和按钮；如果整卡只导航到一个目标，链接必须有清晰名称并保留可见焦点。头部状态不能只靠颜色，图片需要合适替代文本，操作顺序与视觉顺序必须一致。宿主负责数据、导航、选择和权限；组件只负责内容边界与排版。