#Resource Card

Resource Cards represent files, templates, assistants, configurations, and other workbench artifacts. Their restrained preview and explicit copy communicate type and state; static cards remain flat.

npm install @a3s-lab/ui

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

#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 shift border and tone on hover without lifting. Use disabled only with button roots. data-state="loading", data-state="unavailable", and data-selected="true" expose catalog states; 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.