UI Kits
Cards

Team Card

Compact team or department card.

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-team"><div class="ap-avatar">OP</div><section><strong>Operations</strong><span>8 team members</span></section><button>Open</button></article>
Related components

More in Cards