Team Avatar Card
Initials-only avatar circles in a row that lift slightly on hover and pop out a full profile card — gradient hero band, larger avatar with shadow ring, role + presence dot + bio + three-stat row + Message / View Profile buttons. Built for team rosters, mention popovers, comment hovers.
Team Avatar Card the 9th of 21 designs in the 21 CSS Tooltips collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="avt-stage">
<div class="avt-inner">
<div class="avt-t">
<div class="avt-circle" style="background:linear-gradient(135deg,#6028a0,#9060d0)">SL</div>
<div class="avt-tip">
<div class="avt-hero" style="background:linear-gradient(135deg,#4a1880,#8050c0)">
<div class="avt-photo" style="background:linear-gradient(135deg,#6028a0,#9060d0)">SL</div>
</div>
<div class="avt-body">
<div class="avt-name">Sarah Lindqvist</div>
<div class="avt-role">CEO · Executive</div>
<div class="avt-online"><span class="avt-online-dot" style="background:#22c55e"></span>Active now</div>
<div class="avt-bio">Former Stripe PM. Building the next layer of financial infrastructure for SMBs.</div>
<div class="avt-stats">
<div><div class="avt-stat-n">214</div><div class="avt-stat-l">Team</div></div>
<div><div class="avt-stat-n">8yr</div><div class="avt-stat-l">Tenure</div></div>
<div><div class="avt-stat-n">$1.2B</div><div class="avt-stat-l">Valuation</div></div>
</div>
</div>
<div class="avt-foot">
<div class="avt-btn">Message</div>
<div class="avt-btn avt-btn-prim">View Profile</div>
</div>
</div>
</div>
<div class="avt-t">
<div class="avt-circle" style="background:linear-gradient(135deg,#204080,#4070c0)">MW</div>
<div class="avt-tip">
<div class="avt-hero" style="background:linear-gradient(135deg,#102060,#3060a0)">
<div class="avt-photo" style="background:linear-gradient(135deg,#204080,#4070c0)">MW</div>
</div>
<div class="avt-body">
<div class="avt-name">Marcus Webb</div>
<div class="avt-role">CTO · Engineering</div>
<div class="avt-online"><span class="avt-online-dot" style="background:#22c55e"></span>Active now</div>
<div class="avt-bio">Ex-Google infra. Obsessed with distributed systems and making things fast at scale.</div>
<div class="avt-stats">
<div><div class="avt-stat-n">96</div><div class="avt-stat-l">Team</div></div>
<div><div class="avt-stat-n">5yr</div><div class="avt-stat-l">Tenure</div></div>
<div><div class="avt-stat-n">340</div><div class="avt-stat-l">PRs</div></div>
</div>
</div>
<div class="avt-foot">
<div class="avt-btn">Message</div>
<div class="avt-btn avt-btn-prim">View Profile</div>
</div>
</div>
</div>
<div class="avt-t">
<div class="avt-circle" style="background:linear-gradient(135deg,#0a6050,#1aa080)">ER</div>
<div class="avt-tip">
<div class="avt-hero" style="background:linear-gradient(135deg,#054030,#108060)">
<div class="avt-photo" style="background:linear-gradient(135deg,#0a6050,#1aa080)">ER</div>
</div>
<div class="avt-body">
<div class="avt-name">Elena Russo</div>
<div class="avt-role">CMO · Marketing</div>
<div class="avt-online"><span class="avt-online-dot" style="background:#f59e0b"></span>Away · 2h ago</div>
<div class="avt-bio">Brand strategist. Grew Notion's Europe presence 3×. London-based, GMT+1.</div>
<div class="avt-stats">
<div><div class="avt-stat-n">68</div><div class="avt-stat-l">Team</div></div>
<div><div class="avt-stat-n">3yr</div><div class="avt-stat-l">Tenure</div></div>
<div><div class="avt-stat-n">+84%</div><div class="avt-stat-l">YoY</div></div>
</div>
</div>
<div class="avt-foot">
<div class="avt-btn">Message</div>
<div class="avt-btn avt-btn-prim">View Profile</div>
</div>
</div>
</div>
<div class="avt-t">
<div class="avt-circle" style="background:linear-gradient(135deg,#802050,#c04080)">AP</div>
<div class="avt-tip">
<div class="avt-hero" style="background:linear-gradient(135deg,#601030,#a03060)">
<div class="avt-photo" style="background:linear-gradient(135deg,#802050,#c04080)">AP</div>
</div>
<div class="avt-body">
<div class="avt-name">Aisha Patel</div>
<div class="avt-role">Growth Lead · Marketing</div>
<div class="avt-online"><span class="avt-online-dot" style="background:#94a3b8"></span>Offline</div>
<div class="avt-bio">Data-driven growth. 0 → 100k users in 18 months. Runs the acquisition engine.</div>
<div class="avt-stats">
<div><div class="avt-stat-n">6</div><div class="avt-stat-l">Team</div></div>
<div><div class="avt-stat-n">1yr</div><div class="avt-stat-l">Tenure</div></div>
<div><div class="avt-stat-n">$1.2M</div><div class="avt-stat-l">Budget</div></div>
</div>
</div>
<div class="avt-foot">
<div class="avt-btn">Message</div>
<div class="avt-btn avt-btn-prim">View Profile</div>
</div>
</div>
</div>
</div>
</div> .avt-stage {
background: #ffffff;
/* Top room for the profile card (~280px tall) popping up from each
avatar circle. */
padding: 300px 28px 40px;
display: flex;
align-items: flex-end;
justify-content: center;
font-family: 'Inter', system-ui, sans-serif;
}
.avt-inner {
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
}
.avt-t {
position: relative;
cursor: help;
}
.avt-circle {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
letter-spacing: 0.03em;
transition: transform .15s, box-shadow .15s;
}
.avt-t:hover .avt-circle {
transform: scale(1.1) translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
.avt-tip {
position: absolute;
bottom: calc(100% + 12px);
left: 50%;
transform: translateX(-50%) translateY(4px);
width: 240px;
background: #fff;
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.07);
box-shadow:
0 12px 36px rgba(0, 0, 0, 0.12),
0 2px 8px rgba(0, 0, 0, 0.06);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .25s,
transform .25s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear .25s;
z-index: 30;
overflow: hidden;
text-align: left;
}
.avt-t:hover .avt-tip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
transition-delay: 0s;
}
.avt-hero {
height: 56px;
position: relative;
}
.avt-photo {
width: 48px;
height: 48px;
border-radius: 50%;
border: 3px solid #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
position: absolute;
left: 14px;
bottom: -14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
color: rgba(255, 255, 255, 0.92);
}
.avt-body {
padding: 20px 14px 12px;
}
.avt-name {
font-size: 14px;
font-weight: 600;
color: #111;
}
.avt-role {
font-size: 10.5px;
color: #888;
margin-top: 2px;
}
.avt-online {
display: flex;
align-items: center;
gap: 5px;
font-size: 10px;
color: #888;
margin-top: 6px;
}
.avt-online-dot {
width: 6px;
height: 6px;
border-radius: 50%;
}
.avt-bio {
font-size: 11.5px;
color: #555;
margin-top: 8px;
line-height: 1.5;
}
.avt-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-top: 12px;
padding-top: 11px;
border-top: 1px solid #f0f0f0;
text-align: center;
}
.avt-stat-n {
font-size: 15px;
font-weight: 700;
color: #111;
}
.avt-stat-l {
font-size: 8px;
color: #bbb;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 1px;
}
.avt-foot {
padding: 9px 14px;
border-top: 1px solid #f0f0f0;
display: flex;
gap: 6px;
}
.avt-btn {
flex: 1;
padding: 6px 0;
border-radius: 6px;
font-size: 11px;
font-weight: 500;
text-align: center;
border: 1px solid #e8e8e8;
color: #444;
background: #fafafa;
cursor: pointer;
}
.avt-btn-prim {
background: #111;
border-color: #111;
color: #fff;
}