UI Kits
Cards

Project Card

Project status card with progress.

Usage guidance

When to use it.

Use cards to group related information, not as decoration for every piece of content.

Accessibility

Implementation notes.

  • Avoid making nested interactive elements conflict with a clickable card.
  • Use semantic headings in document order.
  • Ensure controls have visible focus states.
Release QA

Implementation checklist.

0/3
Handoff notes

Implementation notes for this component.

Quick section export
<article class="ap-project"><header><strong>Website redesign</strong><span>In progress</span></header><p>Marketing · Due Aug 28</p><div class="ap-progress"><i style="width:72%"></i></div><small>72% complete</small></article>
Related components

More in Cards