#Artifact Card

Artifact Card presents a durable output such as a report, document, image, patch, or dataset. It stays flatter and denser than a catalog resource card.

npm install @a3s-lab/ui@0.4.0

<article class="artifact-card" data-state="complete">
  <header><h3>Release readiness report</h3><span data-artifact-meta>Markdown</span></header>
  <section><div data-artifact-preview>...</div></section>
  <footer>...</footer>
</article>

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

#Usage

<article class="artifact-card" data-state="complete">
  <header><h3>Release readiness report</h3><span data-artifact-meta>Markdown</span></header>
  <section><div data-artifact-preview>...</div></section>
  <footer>...</footer>
</article>

#Parameters

#States and variants

Generating state keeps the future title and format visible. Stale state explains what changed and how to regenerate.

#Accessibility

Use a heading for the artifact name. Preview content is ordinary document content; do not duplicate its entire accessible text in the metadata.