#Resource Card

Resource Cards represent files, templates, agents, configurations, and other workbench artifacts. Their accent and preview area communicate type while the text remains the source of truth.

npm install @a3s-lab/ui@0.2.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";

#Usage

<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>

#Parameters

#States and variants

Buttons are used for in-place actions; anchors are used for navigation. Both provide hover and focus-visible states. Use disabled only with button roots. Horizontal orientation is useful for recent-file lists and search results.

#Accessibility

Preview artwork is decorative unless it conveys unique content; hide decorative SVGs with aria-hidden="true". Keep the title and type in text. Avoid nesting interactive controls inside a card link or button.