UI Kits
Cards

Profile Card

Profile summary card with role and contact action.

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-profile"><div class="ap-avatar">FE</div><div><h3>Frank Edens</h3><p>Administrator</p></div><button>Contact</button></article>
Related components

More in Cards