Org Chart Node
A three-tier org chart with CEO → C-suite → leads. Hover any node to lift a profile card with gradient hero, avatar monogram, role + department pill, three stats (reports/org size/tenure), and a footer with email + timezone. For team directories, succession-planning UIs, internal wikis.
Org Chart Node the 18th 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="org-stage">
<div class="org-tree">
<div class="org-level">
<div class="org-node">
<div class="org-box org-box-ceo">
<div class="org-av" style="background:linear-gradient(135deg,#6028a0,#9060d0)">SL</div>
<div class="org-bname">Sarah Lindqvist</div>
<div class="org-btitle">Chief Executive Officer</div>
<div class="org-bdept">Executive</div>
</div>
<div class="org-card org-card-left">
<div class="org-hero" style="background:linear-gradient(135deg,#4a1880,#8050c0)"></div>
<div class="org-photo" style="background:linear-gradient(135deg,#6028a0,#9060d0)">SL</div>
<div class="org-body">
<div class="org-name">Sarah Lindqvist</div>
<div class="org-title">Chief Executive Officer</div>
<span class="org-pill">Executive · Board</span>
<div class="org-stats">
<div class="org-stat"><div class="org-stat-n">2</div><div class="org-stat-l">Reports</div></div>
<div class="org-stat"><div class="org-stat-n">214</div><div class="org-stat-l">Org Size</div></div>
<div class="org-stat"><div class="org-stat-n">8yr</div><div class="org-stat-l">Tenure</div></div>
</div>
</div>
<div class="org-foot"><span>[email protected]</span><span>NYC · EST</span></div>
</div>
</div>
</div>
<div class="org-conn"></div>
<div class="org-level">
<div class="org-node">
<div class="org-box">
<div class="org-av" style="background:linear-gradient(135deg,#204080,#4070c0)">MW</div>
<div class="org-bname">Marcus Webb</div>
<div class="org-btitle">Chief Technology Officer</div>
<div class="org-bdept">Engineering</div>
</div>
<div class="org-card org-card-left">
<div class="org-hero" style="background:linear-gradient(135deg,#102060,#3060a0)"></div>
<div class="org-photo" style="background:linear-gradient(135deg,#204080,#4070c0)">MW</div>
<div class="org-body">
<div class="org-name">Marcus Webb</div>
<div class="org-title">Chief Technology Officer</div>
<span class="org-pill">Engineering · Platform</span>
<div class="org-stats">
<div class="org-stat"><div class="org-stat-n">2</div><div class="org-stat-l">Reports</div></div>
<div class="org-stat"><div class="org-stat-n">96</div><div class="org-stat-l">Org Size</div></div>
<div class="org-stat"><div class="org-stat-n">5yr</div><div class="org-stat-l">Tenure</div></div>
</div>
</div>
<div class="org-foot"><span>[email protected]</span><span>SF · PST</span></div>
</div>
</div>
<div class="org-node">
<div class="org-box">
<div class="org-av" style="background:linear-gradient(135deg,#0a6050,#1aa080)">ER</div>
<div class="org-bname">Elena Russo</div>
<div class="org-btitle">Chief Marketing Officer</div>
<div class="org-bdept">Marketing</div>
</div>
<div class="org-card">
<div class="org-hero" style="background:linear-gradient(135deg,#054030,#108060)"></div>
<div class="org-photo" style="background:linear-gradient(135deg,#0a6050,#1aa080)">ER</div>
<div class="org-body">
<div class="org-name">Elena Russo</div>
<div class="org-title">Chief Marketing Officer</div>
<span class="org-pill">Marketing · Growth</span>
<div class="org-stats">
<div class="org-stat"><div class="org-stat-n">2</div><div class="org-stat-l">Reports</div></div>
<div class="org-stat"><div class="org-stat-n">68</div><div class="org-stat-l">Org Size</div></div>
<div class="org-stat"><div class="org-stat-n">3yr</div><div class="org-stat-l">Tenure</div></div>
</div>
</div>
<div class="org-foot"><span>[email protected]</span><span>London · GMT</span></div>
</div>
</div>
<div class="org-node">
<div class="org-box">
<div class="org-av" style="background:linear-gradient(135deg,#804010,#c07030)">AT</div>
<div class="org-bname">Amir Tahir</div>
<div class="org-btitle">Chief Financial Officer</div>
<div class="org-bdept">Finance</div>
</div>
<div class="org-card">
<div class="org-hero" style="background:linear-gradient(135deg,#603008,#a06020)"></div>
<div class="org-photo" style="background:linear-gradient(135deg,#804010,#c07030)">AT</div>
<div class="org-body">
<div class="org-name">Amir Tahir</div>
<div class="org-title">Chief Financial Officer</div>
<span class="org-pill">Finance · Strategy</span>
<div class="org-stats">
<div class="org-stat"><div class="org-stat-n">2</div><div class="org-stat-l">Reports</div></div>
<div class="org-stat"><div class="org-stat-n">50</div><div class="org-stat-l">Org Size</div></div>
<div class="org-stat"><div class="org-stat-n">2yr</div><div class="org-stat-l">Tenure</div></div>
</div>
</div>
<div class="org-foot"><span>[email protected]</span><span>Dubai · GST</span></div>
</div>
</div>
</div>
</div>
</div> .org-stage {
background: #f7f7f9;
/* Side room — org cards pop to the right (CMO/CFO) or left (CEO/CTO). */
padding: 40px 280px;
font-family: 'Inter', system-ui, sans-serif;
display: flex;
align-items: center;
justify-content: center;
}
.org-tree {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
.org-level {
display: flex;
justify-content: center;
gap: 18px;
position: relative;
}
.org-conn {
width: 1px;
height: 24px;
background: #d0d0d8;
margin: 0 auto;
}
.org-node {
position: relative;
cursor: help;
}
.org-box {
background: #fff;
border: 1px solid #e0e0e8;
border-radius: 8px;
padding: 9px 12px;
width: 130px;
text-align: center;
transition: border-color .15s, box-shadow .15s;
}
.org-node:hover .org-box {
border-color: #a0a0c0;
box-shadow: 0 4px 16px rgba(0, 0, 40, 0.08);
}
.org-box-ceo {
border-color: #c0b0e0;
background: linear-gradient(135deg, #faf9ff, #fff);
}
.org-av {
width: 30px;
height: 30px;
border-radius: 50%;
margin: 0 auto 7px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10.5px;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
letter-spacing: 0.03em;
}
.org-bname {
font-size: 10.5px;
font-weight: 600;
color: #1a1a2e;
}
.org-btitle {
font-size: 8.5px;
color: #909098;
margin-top: 2px;
letter-spacing: 0.04em;
}
.org-bdept {
font-size: 7.5px;
color: #c0c0cc;
margin-top: 1px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.org-card {
position: absolute;
left: calc(100% + 12px);
top: 50%;
transform: translateY(-50%) translateX(6px);
z-index: 200;
width: 230px;
background: #fff;
border: 1px solid #e4e4ee;
border-radius: 10px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .2s,
transform .2s cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear .2s;
box-shadow:
0 8px 30px rgba(0, 0, 40, 0.12),
0 2px 8px rgba(0, 0, 40, 0.06);
overflow: hidden;
text-align: left;
}
.org-node:hover .org-card {
opacity: 1;
visibility: visible;
transform: translateY(-50%) translateX(0);
transition-delay: 0s;
}
.org-card-left {
left: auto;
right: calc(100% + 12px);
transform: translateY(-50%) translateX(-6px);
}
.org-node:hover .org-card-left {
transform: translateY(-50%) translateX(0);
}
.org-hero {
height: 50px;
position: relative;
}
.org-photo {
width: 44px;
height: 44px;
border-radius: 50%;
border: 3px solid #fff;
position: absolute;
left: 14px;
bottom: -14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.org-body {
padding: 20px 14px 11px;
}
.org-name {
font-size: 14px;
font-weight: 600;
color: #1a1a2e;
}
.org-title {
font-size: 10.5px;
color: #6060a0;
margin-top: 1px;
}
.org-pill {
display: inline-block;
font-size: 8.5px;
padding: 2px 7px;
border-radius: 4px;
background: #f0f0f8;
color: #8080b0;
margin-top: 6px;
border: 1px solid #e4e4f0;
letter-spacing: 0.04em;
}
.org-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-top: 11px;
padding-top: 10px;
border-top: 1px solid #f0f0f8;
}
.org-stat {
text-align: center;
}
.org-stat-n {
font-size: 14px;
font-weight: 600;
color: #2a2a4e;
}
.org-stat-l {
font-size: 7.5px;
color: #c0c0cc;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 2px;
}
.org-foot {
padding: 9px 14px;
border-top: 1px solid #f4f4fc;
font-size: 9.5px;
color: #b0b0c8;
display: flex;
justify-content: space-between;
}