When to use it.
Use cards to group related information, not as decoration for every piece of content.
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
0/3Implementation checklist.
Handoff notes
Implementation notes for this component.
Quick section export
<article class="ap-invoice-summary"><header><strong>Invoice #1048</strong><span>Paid</span></header><div><span>Subtotal</span><strong>$170.00</strong></div><div><span>Tax</span><strong>$14.00</strong></div><footer><span>Total</span><strong>$184.00</strong></footer></article>Related components