Pull quotes · 3 varianten Nieuw

<!-- Pull quotes · 3 varianten · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="pqs"><div class="pqs__tabs" role="tablist" aria-label="Citaatvariant"><button type="button" role="tab" class="pqs__tab" id="pqs-t1" aria-controls="pqs-p1" aria-selected="true">Groot</button><button type="button" role="tab" class="pqs__tab" id="pqs-t2" aria-controls="pqs-p2" aria-selected="false" tabindex="-1">Met foto</button><button type="button" role="tab" class="pqs__tab" id="pqs-t3" aria-controls="pqs-p3" aria-selected="false" tabindex="-1">In marge</button></div>
<div class="pqs__p" id="pqs-p1" role="tabpanel" aria-labelledby="pqs-t1"><figure class="pqs__big"><svg class="pqs__mark" viewBox="0 0 40 30" aria-hidden="true"><path d="M2 30V18C2 8 7 2.5 16 0l1.8 3.6C12.6 5.6 10 9 10 14h7v16zm21 0V18c0-10 5-15.5 14-18l1.8 3.6C33.6 5.6 31 9 31 14h7v16z"/></svg><blockquote><p>Sinds de nieuwe site bellen er elke week drie à vier mensen die ons via Google vonden. Vroeger kwam alles via de buren.</p></blockquote><figcaption><b>Henk Jansen</b> · eigenaar Jansen Dakwerken, Amersfoort</figcaption></figure></div>
<div class="pqs__p" id="pqs-p2" role="tabpanel" aria-labelledby="pqs-t2" hidden><figure class="pqs__ph"><img src="https://neddev.com/lab-media/pull-quote-set-1.webp" alt="Ineke Rozendaal tussen de planten in haar kas" width="600" height="600" loading="lazy"><div><blockquote><p>We dachten dat online bestellen niets voor onze klanten was. Nu komt een derde van de bezorgorders via de site binnen.</p></blockquote><figcaption><b>Ineke Rozendaal</b><span>Tuincentrum De Linde, Zeist</span></figcaption></div></figure></div>
<div class="pqs__p" id="pqs-p3" role="tabpanel" aria-labelledby="pqs-t3" hidden><div class="pqs__mg"><div class="pqs__body"><p class="pqs__h">Case · keukenrenovatie Utrecht</p><p>De familie Öztürk wilde de keuken openbreken naar de tuin, zonder dat ze weken zonder kookplek zaten. We plaatsten een tijdelijke keuken in de garage en werkten in drie vaste fases.</p><p>De draagmuur ging eruit op dag vier, het staal lag er op dag vijf.</p></div><figure class="pqs__side"><blockquote><p>Na zes weken stond alles er, op de dag die in de planning stond.</p></blockquote><figcaption>Aylin Öztürk, Utrecht</figcaption></figure></div></div></div>
</div>

/* Pull quotes · 3 varianten · NedDev · eigen werk. */
.pqs{position:absolute;inset:0;box-sizing:border-box;padding:12px 18px 14px;background:#fff;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;display:flex;flex-direction:column;gap:12px}
.pqs__tabs{display:flex;gap:16px;border-bottom:1px solid rgba(10,10,10,.12)}
.pqs__tab{font:600 12px 'Switzer',system-ui,sans-serif;border:0;background:none;color:#6b6a66;padding:4px 0 7px;margin-bottom:-1px;border-bottom:2px solid transparent;cursor:pointer;transition:color .15s,border-color .15s}
.pqs__tab:hover{color:#0a0a0a}.pqs__tab[aria-selected="true"]{color:#0a0a0a;border-bottom-color:#F5480F}
.pqs__tab:focus-visible{outline:2px solid #F5480F;outline-offset:2px;border-radius:2px}
.pqs__p{flex:1;min-height:0;display:flex;align-items:center;animation:pqs-in .25s ease-out}
.pqs__p[hidden]{display:none}
@keyframes pqs-in{from{opacity:0;transform:translateY(4px)}}
.pqs figure{margin:0}.pqs blockquote{margin:0}.pqs blockquote p{margin:0}
.pqs__big{position:relative;padding-left:46px}
.pqs__mark{position:absolute;left:0;top:2px;width:32px;height:24px;fill:#F5480F}
.pqs__big blockquote p{font-size:18px;font-weight:600;line-height:1.32;letter-spacing:-.01em;text-wrap:balance}
.pqs__big figcaption{margin-top:10px;font-size:11.5px;color:#5f5e5a}.pqs__big figcaption b{color:#0a0a0a}
.pqs__ph{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center}
.pqs__ph img{width:96px;height:120px;object-fit:cover;border-radius:4px;display:block}
.pqs__ph blockquote p{font-size:14.5px;line-height:1.42;font-weight:500;text-wrap:pretty}
.pqs__ph blockquote{border-left:2px solid #F5480F;padding-left:12px}
.pqs__ph figcaption{margin:9px 0 0 14px;font-size:11.5px;display:flex;flex-direction:column}
.pqs__ph figcaption span{color:#5f5e5a}
.pqs__mg{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:start}
.pqs__body p{margin:0 0 6px;font-size:11.5px;line-height:1.5;color:#3d3c39}
.pqs__body .pqs__h{font:500 9.5px 'JetBrains Mono',monospace;letter-spacing:.06em;color:#6b6a66;text-transform:uppercase}
.pqs__side{border-top:2px solid #0a0a0a;padding-top:8px;margin-top:18px}
.pqs__side blockquote p{font-size:14px;font-weight:650;line-height:1.3;color:#b33208}
.pqs__side figcaption{margin-top:6px;font:500 10px 'JetBrains Mono',monospace;color:#5f5e5a}
@media(max-width:420px){.pqs{padding:10px 12px 10px;gap:8px}.pqs__big{padding-left:34px}.pqs__mark{width:24px;height:18px}.pqs__big blockquote p{font-size:15px}.pqs__ph{grid-template-columns:72px 1fr;gap:10px}.pqs__ph img{width:72px;height:96px}.pqs__ph blockquote p{font-size:12.5px}.pqs__body p{font-size:10.5px;line-height:1.4}.pqs__body p:last-child{display:none}.pqs__side blockquote p{font-size:12.5px}.pqs__side{margin-top:4px}}
@media(prefers-reduced-motion:reduce){.pqs__p{animation:none}}

// Pull quotes · 3 varianten · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.pqs');if(!w)return;var tabs=[].slice.call(w.querySelectorAll('.pqs__tab'));
function sel(t,f){tabs.forEach(function(x){var on=x===t;x.setAttribute('aria-selected',on?'true':'false');x.tabIndex=on?0:-1;w.querySelector('#'+x.getAttribute('aria-controls')).hidden=!on;});if(f)t.focus();}
tabs.forEach(function(t,i){t.addEventListener('click',function(){sel(t);});t.addEventListener('keydown',function(e){var j={ArrowRight:i+1,ArrowLeft:i-1,Home:0,End:tabs.length-1}[e.key];if(j===undefined)return;e.preventDefault();sel(tabs[(j+tabs.length)%tabs.length],true);});});
}
init(document.querySelector('.jouw-container'));