Profile Cards

Profile card examples composed from cards, avatars, badges, buttons and utility classes.

Default

Use an article for a self-contained profile and connect it to the person’s heading. When the visible name already identifies the person, hide repeated avatar initials from assistive technology.

<article class="card shadow-sm border-primary w-100 w-md-60 mx-auto" aria-labelledby="profile-alex-morgan">
<div class="card-body d-flex flex-column align-items-center text-center gap-3">
	<header class="d-flex flex-column align-items-center gap-2">
		<span class="avatar avatar-xl bg-primary" aria-hidden="true">AM</span>
		<div>
			<h3 class="h4 card-title mb-0" id="profile-alex-morgan">Alex Morgan</h3>
			<p class="text-muted mb-0">Product designer</p>
		</div>
		<span class="badge bg-success">Available for work</span>
	</header>

	<p class="mb-0">Designs accessible interfaces and practical design systems for growing product teams.</p>

	<div class="d-flex flex-wrap justify-content-center gap-1" role="list" aria-label="Skills">
		<span class="badge badge-outline text-primary" role="listitem">Design systems</span>
		<span class="badge badge-outline text-primary" role="listitem">Accessibility</span>
		<span class="badge badge-outline text-primary" role="listitem">Research</span>
	</div>

	<footer class="d-flex flex-wrap justify-content-center gap-2">
		<a class="btn btn-solid btn-primary" href="mailto:alex.morgan@example.com">Email Alex</a>
		<button class="btn btn-outline btn-primary" type="button">Follow Alex</button>
	</footer>
  </div>

</article>

Horizontal

Switch from a stacked mobile layout to a row at the medium breakpoint. Let the text region shrink and wrap while the avatar keeps its size.

<article class="card shadow-sm" aria-labelledby="profile-morgan-lee">
<div class="card-body d-flex flex-column flex-md-row align-items-md-center gap-3">
	<span class="avatar avatar-lg bg-secondary" aria-hidden="true">
		<span>ML</span>
	</span>
	<div class="flex-grow-1 min-w-0">
		<header class="d-flex flex-wrap align-items-center gap-2 mb-1">
			<h3 class="h5 card-title mb-0" id="profile-morgan-lee">
				<span>Morgan Lee</span>
			</h3>
			<span class="badge bg-primary">Team lead</span>
		</header>
		<p class="text-muted mb-0 overflow-wrap-anywhere">
			<span>Frontend engineer · morgan.lee@example.com</span>
		</p>
	</div>
	<button class="btn btn-outline btn-primary" type="button">
		<span>Message Morgan</span>
	</button>
</div>
</article>

Responsive collection

Place profile cards in the responsive grid when several people share the same context. The cards span the full width on small screens and share a row from the medium breakpoint.

<div class="grid">
<article class="card shadow-sm col-12 col-md-6" aria-labelledby="profile-sam-rivera">
	<div class="card-body d-flex flex-column gap-3 h-100">
		<header class="d-flex align-items-center gap-2">
			<span class="avatar bg-warning" aria-hidden="true">SR</span>
			<div class="min-w-0">
				<h3 class="h5 card-title mb-0" id="profile-sam-rivera">Sam Rivera</h3>
				<p class="text-muted mb-0">Content strategist</p>
			</div>
		</header>
		<span class="badge bg-warning">On leave</span>
		<p class="mb-0">Turns complex product language into clear, inclusive guidance.</p>
		<footer class="mt-auto">
			<button class="btn btn-text btn-primary" type="button">Open Sam's details</button>
		</footer>
	</div>
</article>

  <article class="card shadow-sm col-12 col-md-6" aria-labelledby="profile-jamie-patel">
	<div class="card-body d-flex flex-column gap-3 h-100">
		<header class="d-flex align-items-center gap-2">
			<span class="avatar bg-success" aria-hidden="true">JP</span>
			<div class="min-w-0">
				<h3 class="h5 card-title mb-0" id="profile-jamie-patel">Jamie Patel</h3>
				<p class="text-muted mb-0">Accessibility engineer</p>
			</div>
		</header>
		<span class="badge bg-success">Online</span>
		<p class="mb-0">Builds resilient interaction patterns and supports inclusive delivery.</p>
		<footer class="mt-auto">
				<button class="btn btn-text btn-primary" type="button">Open Jamie's details</button>
		</footer>
	</div>
  </article>

</div>