Team
Grid, list, card and social-linked team member sections.
Team Grid
Marcus Cole
Founder & CEO
David Park
CTO
Robert Chen
Head of Design
James Miller
Engineering Lead
<div class="uk-team-grid">
<div class="uk-team-card">
<img src="..." class="uk-team-photo">
<div class="uk-team-name">Marcus Cole</div>
<div class="uk-team-role">Founder & CEO</div>
</div>
</div>
<style>
.uk-team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1.25rem;
}
.uk-team-card {
text-align: center;
padding: 1.5rem 1rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
transition: all 0.2s;
}
.uk-team-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 24px rgba(30, 58, 138, 0.08);
}
.uk-team-photo {
width: 88px; height: 88px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 0.85rem;
}
.uk-team-name {
font-weight: 700; color: #0b1b2f; font-size: 0.95rem;
}
.uk-team-role {
font-size: 0.78rem; color: #94a3b8;
}
</style>
Team Card with Social Links
Ali Khan
Product Designer
<div class="uk-team-social">
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
</div>
<style>
.uk-team-social {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 0.85rem;
}
.uk-team-social a {
width: 32px; height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f1f5f9;
color: #475569;
font-size: 0.8rem;
transition: all 0.15s;
text-decoration: none;
}
.uk-team-social a:hover {
background: #1e3a8a;
color: #fff;
}
</style>
Horizontal Team List
<div class="uk-team-row">
<img src="..." class="uk-team-row-photo">
<div style="flex:1;">
<div class="uk-team-name">Marcus Cole</div>
<div class="uk-team-role">Founder & CEO</div>
</div>
<a href="mailto:..."><i class="fas fa-envelope"></i></a>
</div>
<style>
.uk-team-row {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.85rem 1rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.85rem;
margin-bottom: 0.5rem;
}
.uk-team-row-photo {
width: 48px; height: 48px;
border-radius: 50%;
object-fit: cover;
}
</style>
Featured Team Member
James Miller
Engineering Lead
15+ years building scalable web infrastructure. Leads a team of 8 engineers across 3 continents.
<div class="uk-team-featured">
<img src="..." class="uk-team-feat-photo">
<div>
<div class="uk-team-name">James Miller</div>
<div class="uk-team-role">Engineering Lead</div>
<p>15+ years building...</p>
</div>
</div>
<style>
.uk-team-featured {
display: flex;
gap: 1.25rem;
padding: 1.5rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
align-items: flex-start;
}
.uk-team-feat-photo {
width: 120px; height: 120px;
border-radius: 1rem;
object-fit: cover;
flex-shrink: 0;
}
</style>
Compact Avatar Row
+12
<div class="uk-team-avatars">
<img src="..."><img src="..."><img src="...">
<div class="uk-team-avatars-count">+12</div>
</div>
<style>
.uk-team-avatars {
display: inline-flex;
align-items: center;
}
.uk-team-avatars img,
.uk-team-avatars-count {
width: 44px; height: 44px;
border-radius: 50%;
border: 3px solid #fff;
margin-left: -12px;
object-fit: cover;
}
.uk-team-avatars img:first-child { margin-left: 0; }
.uk-team-avatars-count {
background: #1e3a8a;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.8rem;
}
</style>
Team Bio Card
David Park
Chief Technology Officer
Leading engineering at scale. Previously at Google and Stripe.
<div class="uk-team-bio">
<div class="uk-team-bio-header"></div>
<img src="..." class="uk-team-bio-photo">
<div class="uk-team-bio-body">
<div class="uk-team-name">David Park</div>
<div class="uk-team-role">Chief Technology Officer</div>
<p>Leading engineering at scale.</p>
</div>
</div>
<style>
.uk-team-bio {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
overflow: hidden;
text-align: center;
padding-bottom: 1.5rem;
}
.uk-team-bio-header {
height: 80px;
background: linear-gradient(135deg, #1e3a8a, #6366f1);
}
.uk-team-bio-photo {
width: 96px; height: 96px;
border-radius: 50%;
border: 4px solid #fff;
object-fit: cover;
margin-top: -48px;
}
.uk-team-bio-body { padding: 0.75rem 1rem 0; }
</style>