Alex Morgan
Product designer
AvailableDesign
Design systems, research and accessible interaction patterns.
Team Member Directory
A team member directory composed from cards, avatars, badges, pagination and search controls.
Search and browse
Product and engineering
18 membersFind a colleague by name, role or skill.
Showing 1–6 of 18 members
All departmentsMorgan Lee
Frontend engineer
In a meetingEngineering
Component architecture, performance and developer tooling.
Jamie Patel
Accessibility engineer
AvailableEngineering
Inclusive testing, standards guidance and quality reviews.
Sam Rivera
Content strategist
On leaveContent
Product language, editorial systems and inclusive guidance.
Taylor Kim
Product manager
AvailableProduct
Roadmaps, product discovery and cross-team delivery.
Riley Okafor
Platform engineer
OfflinePlatform
Infrastructure, observability and deployment reliability.
<form class="card shadow-sm border-primary bg-primary bg-opacity-10" role="search" method="get" action="/team">
<div class="card-body">
<label class="form-label" for="team-search">Search team members</label>
<div class="input-group">
<input class="form-control" id="team-search" name="query" type="search" />
<button class="btn btn-solid btn-primary" type="submit">
<i class="icon icon-sm" aria-hidden="true"><!-- search icon --></i>
Search directory
</button>
</div>
</div>
</form>
<div class="grid" aria-labelledby="team-results">
<article class="card shadow-sm col-12 col-sm-6 col-lg-4" aria-labelledby="member-name">
<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-primary" aria-hidden="true">AM</span>
<div>
<h3 class="card-title" id="member-name">Alex Morgan</h3>
<p>Product designer</p>
</div>
</header>
<p><span class="badge bg-success">Available</span></p>
<a class="btn btn-text btn-primary mt-auto" href="mailto:alex.morgan@example.com">
Email Alex
</a>
</div>
</article>
</div>
<nav class="pagination" aria-label="Team directory pages">
<span class="pagination-item disabled">Previous</span>
<a class="pagination-item is-active" href="?query=&page=1" aria-current="page">1</a>
<a class="pagination-item" href="?query=&page=2">2</a>
<a class="pagination-item" href="?query=&page=2">Next</a>
</nav>