#资源卡

Resource Card 表示文件、模板、助理、配置与其他工作台资源。克制的预览与明确文案共同传达类型和状态；静态卡片保持扁平。

npm install @a3s-lab/ui@0.4.0

<div class="resource-grid">
  <button type="button" class="resource-card" data-kind="agent">
    <figure>...</figure>
    <section><strong>Coding agent</strong><small>CLI + 6 skills</small></section>
  </button>
</div>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#用法

<div class="resource-grid">
  <button type="button" class="resource-card" data-kind="agent">
    <figure>...</figure>
    <section><strong>Coding agent</strong><small>CLI + 6 skills</small></section>
  </button>
</div>

#参数

#状态和变体

按钮用于就地操作；链接用于导航。两者在悬停时只改变边界与底色，不上移。disabled 仅与按钮根一起使用。data-state="loading"、data-state="unavailable" 和 data-selected="true" 用于目录状态；水平方向适合最近文件和搜索结果。

#可访问性

预览图稿件是装饰性的，除非它传达了独特的内容；使用 aria-hidden="true" 隐藏装饰性 SVG。保留标题文本并输入。避免在交互链接或按钮内交互式控件。