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

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

      Live previewHTML · CSS · JavaScript

      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

      ParameterValuesDefaultPurpose
      data-kinddocument, spreadsheet, presentation, agent, dangerdocumentAccent family
      data-orientationhorizontal, omittedomittedPreview-and-copy layout
      --resource-grid-minCSS length12remMinimum grid track width
      --resource-grid-gapCSS length1remGrid spacing
      --resource-preview-heightCSS length8.5remPreview region height
      --resource-accentCSS colorKind tokenPer-resource accent override

      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.