Lijnen van dienst naar teamlid New

Services on the left, team on the right. Hover, focus or tap a service and lines draw to the people who do that work; the rest of the team fades. The lines are calculated live from the real positions and redraw at another width. For the team or contact page of an accounting office, practice or agency where visitors want to know who to talk to.

Wie helpt u bij Administratiekantoor Bakker?

Sanne de Witfiscalist
Joris Bakkeraccountant
Mehmet Kayasalarissen
Ellen Vosadviseur mkb

How to use it

Paste the HTML where the components should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- Lijnen van dienst naar teamlid · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="r7wh">
<p class="r7wh__h">Wie helpt u bij Administratiekantoor Bakker?</p>
<div class="r7wh__grid">
<ul class="r7wh__diensten">
<li><button class="r7wh__d" type="button" aria-pressed="true" data-p="0 1">Belastingaangifte</button></li>
<li><button class="r7wh__d" type="button" aria-pressed="false" data-p="2">Loonadministratie</button></li>
<li><button class="r7wh__d" type="button" aria-pressed="false" data-p="1 3">Jaarrekening</button></li>
<li><button class="r7wh__d" type="button" aria-pressed="false" data-p="0 2 3">Startersadvies</button></li>
</ul>
<ul class="r7wh__team">
<li class="r7wh__mens"><span class="r7wh__av" aria-hidden="true">SW</span><span class="r7wh__naam">Sanne de Wit<span class="r7wh__rol">fiscalist</span></span></li>
<li class="r7wh__mens"><span class="r7wh__av" aria-hidden="true">JB</span><span class="r7wh__naam">Joris Bakker<span class="r7wh__rol">accountant</span></span></li>
<li class="r7wh__mens"><span class="r7wh__av" aria-hidden="true">MK</span><span class="r7wh__naam">Mehmet Kaya<span class="r7wh__rol">salarissen</span></span></li>
<li class="r7wh__mens"><span class="r7wh__av" aria-hidden="true">EV</span><span class="r7wh__naam">Ellen Vos<span class="r7wh__rol">adviseur mkb</span></span></li>
</ul>
<svg class="r7wh__svg" aria-hidden="true" focusable="false"></svg>
</div>
<p class="r7wh__sr" aria-live="polite"></p>
</div>
</div>

/* Lijnen van dienst naar teamlid · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.r7wh{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:14px 18px;background:#fff;color:#0a0a0a;font-family:'Switzer',sans-serif;container-type:size;text-align:left}
.r7wh *,.r7wh *::before,.r7wh *::after{box-sizing:border-box}
.r7wh__h{margin:0;font:600 clamp(15px,4.4cqi,18px)/1.2 'Switzer',sans-serif;letter-spacing:-.01em}
.r7wh__grid{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(36px,16cqi,90px)}
.r7wh__diensten,.r7wh__team{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-between;gap:4px;position:relative;z-index:1}
.r7wh__d{min-height:30px;padding:5px 10px;border:1px solid rgba(10,10,10,.2);border-radius:4px;background:#fff;color:#0a0a0a;font:500 13px/1.1 'Switzer',sans-serif;text-align:left;cursor:pointer;width:100%;transition:border-color .16s,background-color .16s,color .16s}
.r7wh__d:hover{border-color:#0a0a0a}
.r7wh__d[aria-pressed="true"]{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.r7wh__d:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.r7wh__mens{display:flex;align-items:center;gap:8px;min-height:34px;transition:opacity .25s}
.r7wh__mens.is-uit{opacity:.35}
.r7wh__av{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#f4f3f1;border:1.5px solid #0a0a0a;font:600 12px/1 'Switzer',sans-serif;transition:background-color .25s,border-color .25s}
.r7wh__mens.is-aan .r7wh__av{background:#F5480F;border-color:#F5480F}
.r7wh__naam{display:flex;flex-direction:column;font:600 13px/1.15 'Switzer',sans-serif;min-width:0}
.r7wh__rol{font:400 12px/1.2 'Switzer',sans-serif;color:#5a5853}
.r7wh__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.r7wh__svg path{fill:none;stroke:#F5480F;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s cubic-bezier(.5,0,.3,1)}
.r7wh__svg path:not(.is-aan){stroke-linecap:butt}
.r7wh__svg path.is-aan{stroke-dashoffset:0}
.r7wh__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@container (max-width:360px){.r7wh__d{padding:5px 8px;font-size:12px}.r7wh__mens{min-height:32px}.r7wh__av{width:28px;height:28px}}
@media (prefers-reduced-motion:reduce){.r7wh__svg path{transition:none}}

// Lijnen van dienst naar teamlid · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.r7wh');if(!w)return;
var grid=w.querySelector('.r7wh__grid'),svg=w.querySelector('.r7wh__svg'),sr=w.querySelector('.r7wh__sr');
var ds=[].slice.call(w.querySelectorAll('.r7wh__d')),mensen=[].slice.call(w.querySelectorAll('.r7wh__mens'));
var NS='http://www.w3.org/2000/svg',actief=0,lijnen=[];
function bouw(){
  var g=grid.getBoundingClientRect();svg.setAttribute('viewBox','0 0 '+g.width+' '+g.height);
  while(svg.firstChild)svg.removeChild(svg.firstChild);lijnen=[];
  ds.forEach(function(d,i){var r=d.getBoundingClientRect(),x1=r.right-g.left+2,y1=r.top-g.top+r.height/2;
    d.getAttribute('data-p').split(' ').forEach(function(pi){var av=mensen[+pi].querySelector('.r7wh__av').getBoundingClientRect();
      var x2=av.left-g.left-3,y2=av.top-g.top+av.height/2,mx=(x1+x2)/2;
      var p=document.createElementNS(NS,'path');p.setAttribute('d','M'+x1.toFixed(1)+' '+y1.toFixed(1)+'C'+mx.toFixed(1)+' '+y1.toFixed(1)+' '+mx.toFixed(1)+' '+y2.toFixed(1)+' '+x2.toFixed(1)+' '+y2.toFixed(1));
      p.setAttribute('pathLength','1');p.setAttribute('data-d',i);svg.appendChild(p);lijnen.push(p);});
  });
  zet(actief,true);
}
function zet(i,stil){
  actief=i;var p=ds[i].getAttribute('data-p').split(' ').map(Number);
  ds.forEach(function(d,j){d.setAttribute('aria-pressed',j===i?'true':'false');});
  mensen.forEach(function(m,j){var aan=p.indexOf(j)>-1;m.classList.toggle('is-aan',aan);m.classList.toggle('is-uit',!aan);});
  lijnen.forEach(function(l){if(stil)l.style.transition='none';l.classList.toggle('is-aan',+l.getAttribute('data-d')===i);if(stil){l.getBoundingClientRect();l.style.transition='';}});
  if(!stil)sr.textContent=ds[i].textContent+': '+p.map(function(j){return mensen[j].querySelector('.r7wh__naam').firstChild.textContent;}).join(' en ');
}
ds.forEach(function(d,i){d.addEventListener('pointerenter',function(){if(i!==actief)zet(i);});d.addEventListener('focus',function(){if(i!==actief)zet(i);});d.addEventListener('click',function(){if(i!==actief)zet(i);});});
if('ResizeObserver' in window){new ResizeObserver(function(){bouw();}).observe(grid);}else bouw();
bouw();
}
init(document.querySelector('.jouw-container'));

More components

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →