Team member card

How to use it

Use on an about or team page, one card per person in a grid. Do not use it for user accounts inside an app (use a profile header). The person here is fictional: replace the name, role, bio and link, change the avatar to a real photo with an empty alt (the name is already written), and keep the bio to two sentences.

Accessibility

An <article> labelled by the person's name in an <h3>, so a page of cards can be browsed by heading; the avatar is decorative inline SVG with aria-hidden="true" because the name is written beside it. The only control is a link whose text names the person, so several cards never produce identical "Read more" links. The name #0f172a on white is 17.85:1, the role #1e3a8a on white 10.36:1, the bio #475569 on white 7.58:1, and the link #1d4ed8 on white 6.70:1 (#1e40af, 8.72:1, while hovered).

Source (copy-ready)

Copy code

<article class="dcl-team">
  <svg class="dcl-team__avatar" viewBox="0 0 80 80" width="80" height="80" aria-hidden="true" focusable="false"><circle cx="40" cy="40" r="40" fill="#dbeafe"/><circle cx="40" cy="32" r="14" fill="#1e3a8a"/><path d="M14 70a26 22 0 0 1 52 0" fill="#1e3a8a"/></svg>
  <h3 class="dcl-team__name">Ines Varga</h3>
  <p class="dcl-team__role">Head of Customer Support</p>
  <p class="dcl-team__bio">Ines leads a support team spread across four time zones. Before joining she ran the help desk for a regional rail operator.</p>
  <a href="../about.html" class="dcl-team__link">Read Ines Varga's profile</a>
</article>
<style>
.dcl-team { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; max-width: 18rem; padding: 1.5rem; border: 1px solid #e2e8f0; border-radius: 0.75rem; text-align: center; font: inherit; color: #0f172a; background-color: #ffffff; box-sizing: border-box; }
.dcl-team__avatar { flex: none; margin-bottom: 0.25rem; }
.dcl-team__name { margin: 0; font-size: 1.15rem; color: #0f172a; background-color: #ffffff; }
.dcl-team__role { margin: 0; font-weight: 600; font-size: 0.9rem; color: #1e3a8a; background-color: #ffffff; }
.dcl-team__bio { margin: 0; line-height: 1.5; color: #475569; background-color: #ffffff; }
.dcl-team__link { margin-top: 0.25rem; color: #1d4ed8; background-color: #ffffff; }
.dcl-team__link:hover { color: #1e40af; background-color: #ffffff; }
.dcl-team__link:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
</style>