Cadeautje met kortingscode New

A drawn gift that wobbles now and then; click the button and the lid flips open, a card with the discount slides up and the code appears with a copy button. Works with the keyboard, announces the code to screen readers and does not wobble with reduced motion. For a web shop thank you page, a newsletter sign up or a birthday mail that links to the site.

Bedankt voor je bestelling bij Koffiebranderij Noord in Groningen

Er zit nog iets voor je in het pakket.

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.

<!-- Cadeautje met kortingscode · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="r7cc">
<div class="r7cc__beeld">
<svg class="r7cc__svg" viewBox="0 -12 140 152" aria-hidden="true" focusable="false">
<g class="r7cc__kaart"><rect x="38" y="62" width="64" height="44" rx="3"/><text x="70" y="85">10%</text><text class="r7cc__klein" x="70" y="99">korting</text></g>
<g class="r7cc__doos"><rect class="r7cc__lijf" x="26" y="74" width="88" height="56" rx="3"/><rect class="r7cc__lint" x="64" y="74" width="12" height="56"/></g>
<g class="r7cc__deksel"><rect class="r7cc__dek" x="20" y="60" width="100" height="18" rx="3"/><rect class="r7cc__lint" x="64" y="60" width="12" height="18"/><path class="r7cc__strik" d="M70 60C58 44 44 50 52 58C56 62 64 61 70 60C76 61 84 62 88 58C96 50 82 44 70 60Z"/></g>
</svg>
</div>
<div class="r7cc__txt">
<p class="r7cc__h">Bedankt voor je bestelling bij Koffiebranderij Noord in Groningen</p>
<p class="r7cc__p">Er zit nog iets voor je in het pakket.</p>
<button class="r7cc__open" type="button">Open je cadeau</button>
<div class="r7cc__code" hidden>
<p class="r7cc__uitleg">10% korting op je volgende bestelling, geldig tot 31 december.</p>
<div class="r7cc__rij"><span class="r7cc__c">Noord10</span><button class="r7cc__kopie" type="button">Kopieer</button></div>
</div>
<p class="r7cc__m" aria-live="polite"></p>
</div>
</div>
</div>

/* Cadeautje met kortingscode · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.r7cc{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:14px;padding:14px 18px;background:#fff;color:#0a0a0a;font-family:'Switzer',sans-serif;container-type:size;text-align:left}
.r7cc *,.r7cc *::before,.r7cc *::after{box-sizing:border-box}
.r7cc__beeld{min-width:0}
.r7cc__svg{display:block;width:100%;max-width:160px;height:auto;margin:0 auto;overflow:visible}
.r7cc__lijf{fill:#F5480F}
.r7cc__dek{fill:#d63c08}
.r7cc__lint{fill:#0a0a0a}
.r7cc__strik{fill:#0a0a0a}
.r7cc__kaart rect{fill:#f4f3f1;stroke:#0a0a0a;stroke-width:1.2}
.r7cc__kaart text{font:700 17px 'Switzer',sans-serif;text-anchor:middle;fill:#0a0a0a}
.r7cc__kaart .r7cc__klein{font:500 12px 'Switzer',sans-serif;fill:#45433f}
.r7cc__kaart{transition:transform .6s cubic-bezier(.3,1.4,.5,1) .25s}
.r7cc__deksel{transform-box:view-box;transform-origin:20px 78px;transition:transform .5s cubic-bezier(.3,1.3,.5,1)}
.r7cc__doos,.r7cc__deksel{transform-box:view-box}
.r7cc.is-wiebel .r7cc__beeld{animation:r7cc-wiebel .7s ease}
@keyframes r7cc-wiebel{0%,100%{transform:rotate(0)}20%{transform:rotate(-5deg)}40%{transform:rotate(4deg)}60%{transform:rotate(-3deg)}80%{transform:rotate(1deg)}}
.r7cc.is-open .r7cc__deksel{transform:translate(10px,-50px) rotate(10deg)}
.r7cc.is-open .r7cc__kaart{transform:translateY(-34px)}
.r7cc__txt{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0}
.r7cc__h{margin:0;font:600 clamp(15px,4.4cqi,18px)/1.2 'Switzer',sans-serif;letter-spacing:-.01em;text-wrap:balance}
.r7cc__p,.r7cc__uitleg{margin:0;font:400 13px/1.4 'Switzer',sans-serif;color:#45433f}
.r7cc__open{min-height:36px;padding:9px 16px;border:0;border-radius:4px;background:#0a0a0a;color:#fff;font:600 14px/1 'Switzer',sans-serif;cursor:pointer;transition:background-color .16s}
.r7cc__open:hover{background:#2a2826}
.r7cc__code{display:flex;flex-direction:column;gap:7px}
.r7cc__code[hidden]{display:none}
.r7cc__rij{display:flex;align-items:stretch;gap:6px}
.r7cc__c{display:flex;align-items:center;padding:6px 12px;border:1.5px dashed #0a0a0a;border-radius:4px;font:700 16px/1 'Switzer',sans-serif;letter-spacing:.03em;user-select:all}
.r7cc__kopie{min-height:34px;padding:6px 12px;border:1px solid #0a0a0a;border-radius:4px;background:#F5480F;color:#0a0a0a;font:600 13px/1 'Switzer',sans-serif;cursor:pointer}
.r7cc__kopie:hover{background:#ff6a36}
.r7cc__open:focus-visible,.r7cc__kopie:focus-visible{outline:2px solid #F5480F;outline-offset:3px}
.r7cc__kopie:focus-visible{outline-color:#0a0a0a}
.r7cc__m{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){.r7cc__p{display:none}}
@media (prefers-reduced-motion:reduce){.r7cc__kaart,.r7cc__deksel{transition:none}.r7cc.is-wiebel .r7cc__beeld{animation:none}}

// Cadeautje met kortingscode · © 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('.r7cc');if(!w)return;
var rm=window.matchMedia&&matchMedia('(prefers-reduced-motion: reduce)').matches;
var open=w.querySelector('.r7cc__open'),code=w.querySelector('.r7cc__code'),kopie=w.querySelector('.r7cc__kopie'),m=w.querySelector('.r7cc__m'),p=w.querySelector('.r7cc__p');
var tik=0;
function wiebel(){if(rm||w.classList.contains('is-open'))return;w.classList.remove('is-wiebel');void w.offsetWidth;w.classList.add('is-wiebel');}
if(!rm){setTimeout(wiebel,700);tik=setInterval(wiebel,3800);}
open.addEventListener('click',function(){
  clearInterval(tik);w.classList.remove('is-wiebel');w.classList.add('is-open');
  open.hidden=true;p.hidden=true;
  setTimeout(function(){code.hidden=false;m.textContent='Je kortingscode is Noord10.';kopie.focus();},rm?0:650);
});
kopie.addEventListener('click',function(){
  var klaar=function(){kopie.textContent='Gekopieerd';m.textContent='Code Noord10 staat op je klembord.';setTimeout(function(){kopie.textContent='Kopieer';},2000);};
  if(navigator.clipboard&&navigator.clipboard.writeText){navigator.clipboard.writeText('Noord10').then(klaar,function(){m.textContent='Kopiëren lukte niet, selecteer de code zelf.';});}else klaar();
});
}
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 →