Pull quotes · 3 varianten New

Three quote styles for blogs and case studies, as proper figure + blockquote + figcaption: large quote with orange quote mark, quote with portrait photo and margin quote next to body text. Switch via accessible tabs (arrows, Home/End). The tabs are demo only; each variant works on its own.

Sinds de nieuwe site bellen er elke week drie à vier mensen die ons via Google vonden. Vroeger kwam alles via de buren.

Henk Jansen · eigenaar Jansen Dakwerken, Amersfoort

How to use it

Paste the HTML where the text animations 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.

<!-- 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'));

More text animations

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 →