Profile card
A team or author card with avatar, role, bio and social links.
<div class="grid">
<article class="person">
<img class="face" src="https://placehold.co/200x200/3b4fe4/ffffff?text=RE" alt="">
<h3>Ruth Ellery</h3>
<p class="role">Head of cloth</p>
<p class="bio">Sources every fabric the studio uses. Fifteen years in mills across Yorkshire and Portugal.</p>
<ul class="links">
<li><a href="#" aria-label="Ruth Ellery on LinkedIn">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4.98 3.5A2.5 2.5 0 1 1 5 8.5a2.5 2.5 0 0 1 0-5zM3 9h4v12H3zM10 9h3.8v1.7h.05c.53-.95 1.83-1.95 3.77-1.95 4.03 0 4.78 2.5 4.78 5.76V21h-4v-5.6c0-1.34-.02-3.06-1.9-3.06-1.9 0-2.2 1.45-2.2 2.96V21h-4z"/></svg>
</a></li>
<li><a href="#" aria-label="Ruth Ellery's website">
<svg viewBox="0 0 24 24" aria-hidden="true" class="stroke"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 2.7 2.5 15.3 0 18M12 3c-2.5 2.7-2.5 15.3 0 18"/></svg>
</a></li>
<li><a href="mailto:ruth@example.com" aria-label="Email Ruth Ellery">
<svg viewBox="0 0 24 24" aria-hidden="true" class="stroke"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>
</a></li>
</ul>
</article>
<article class="person">
<img class="face" src="https://placehold.co/200x200/1f8a5b/ffffff?text=JM" alt="">
<h3>Jon Maher</h3>
<p class="role">Pattern cutter</p>
<p class="bio">Draws every block by hand before it goes digital. Believes in one more fitting.</p>
<ul class="links">
<li><a href="#" aria-label="Jon Maher on LinkedIn">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4.98 3.5A2.5 2.5 0 1 1 5 8.5a2.5 2.5 0 0 1 0-5zM3 9h4v12H3zM10 9h3.8v1.7h.05c.53-.95 1.83-1.95 3.77-1.95 4.03 0 4.78 2.5 4.78 5.76V21h-4v-5.6c0-1.34-.02-3.06-1.9-3.06-1.9 0-2.2 1.45-2.2 2.96V21h-4z"/></svg>
</a></li>
<li><a href="mailto:jon@example.com" aria-label="Email Jon Maher">
<svg viewBox="0 0 24 24" aria-hidden="true" class="stroke"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>
</a></li>
</ul>
</article>
</div>
<article class="byline">
<img class="face sm" src="https://placehold.co/200x200/b7791f/ffffff?text=RE" alt="">
<div>
<h3>Ruth Ellery</h3>
<p class="bio">Head of cloth at Acme. Writes about fabric, mills and why linen creases.</p>
</div>
</article>* { box-sizing: border-box; margin: 0; }
body { font: 16px/1.6 system-ui, -apple-system, sans-serif; background: #f6f8fb; padding: 24px; }
.grid {
display: grid;
gap: 18px;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
margin-bottom: 24px;
}
.person {
text-align: center;
padding: 28px 22px 24px;
background: #fff;
border: 1px solid #e2e7ef;
border-radius: 14px;
}
.face {
width: 84px;
height: 84px;
border-radius: 50%;
object-fit: cover;
background: #eef1f6;
}
.person h3 { margin-top: 14px; font-size: 1.05rem; color: #16202e; }
.role { font-size: .85rem; color: #3b4fe4; font-weight: 500; margin-top: 2px; }
.bio { margin-top: 10px; font-size: .89rem; color: #5b6b83; }
.links {
margin: 16px 0 0;
padding: 0;
list-style: none;
display: flex;
justify-content: center;
gap: 8px;
}
.links a {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 1px solid #e2e7ef;
border-radius: 8px;
color: #5b6b83;
}
.links a:hover { border-color: #3b4fe4; color: #3b4fe4; background: #f7f8fe; }
.links svg { width: 16px; height: 16px; fill: currentColor; }
.links svg.stroke {
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
/* ---- horizontal variant, for an article byline ---- */
.byline {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 20px 22px;
background: #fff;
border: 1px solid #e2e7ef;
border-radius: 14px;
}
.face.sm { width: 52px; height: 52px; }
.byline h3 { font-size: .98rem; color: #16202e; }
.byline .bio { margin-top: 4px; }How it works
Two layouts from one set of styles: a centred card for a team page, and a horizontal variant for an author byline at the foot of an article.
The avatar alt is empty. The name is right underneath it. An alt of "Ruth Ellery" makes a screen reader say the name twice. Decorative images of people next to their own name are one of the clearest cases for alt="".
Social links carry aria-labels. An icon-only link with no text has no accessible name at all — a screen reader announces "link" and nothing else. The label names both the network and the person, because "LinkedIn" alone is ambiguous on a page with eight team members.
Icons inherit colour. Filled icons use fill: currentColor, outlined ones use stroke: currentColor via the .stroke class. One hover rule recolours all of them.
object-fit: cover on the avatar means a non-square photo is cropped rather than squashed. Without it, a portrait photo in a round frame looks like a funhouse mirror.
Accessibility notes
Every icon link has an aria-label naming the destination and the person. Tap targets are 34 pixels, which is close to the 44-pixel minimum recommended for touch — increase them if these are on a mobile-first page.
The role is coloured to distinguish it from the bio, but it is also a separate paragraph, so the distinction does not depend on colour alone.
Making it yours
For a team grid, minmax(240px, 1fr) gives four across on a wide screen and one on a phone. For a fixed four-column layout, swap to repeat(4, 1fr) with a media query.
Add Person or Organization structured data on team pages so search engines can connect the people to the company.
Related templates
Check your version
Once you have edited this, the HTML validator will catch any tag you left unclosed, and the formatter will tidy the indentation. Both run in your browser.