Cookiebanner als hoekkaart New

Corner cookie card with toggles per category. "Accept all" and "Necessary only" are styled equally, as the Dutch DPA requires. Choice can be changed later via the button bottom left.

How to use it

Paste the HTML where the page sections 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.

<!-- Cookiebanner als hoekkaart · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="cks">
  <div class="cks__page" aria-hidden="true">
    <div class="cks__nav"><b>Fietsvak</b><span>Stadsfietsen</span><span>E-bikes</span><span>Onderhoud</span><span class="cks__cart">Mandje (0)</span></div>
    <div class="cks__hero"><span class="cks__k">Werkplaats Utrecht Oost</span><p class="cks__t">Onderhoudsbeurt, klaar terwijl je koffie drinkt</p><span class="cks__b">Plan een beurt · € 69</span></div>
  </div>
  <div class="cks__card" role="dialog" aria-labelledby="cks-h" aria-describedby="cks-d">
    <p class="cks__h" id="cks-h">Cookies op fietsvak.nl</p>
    <p class="cks__d" id="cks-d">Noodzakelijke cookies houden je mandje bij. Met jouw toestemming meten we het bezoek en tonen we advertenties op andere sites. <a href="#">Cookieverklaring</a></p>
    <ul class="cks__opts">
      <li><span><b>Noodzakelijk</b><small>Mandje, inloggen, beveiliging</small></span><label class="cks__sw is-lock"><input type="checkbox" checked disabled><span class="cks__tr"></span><span class="cks__sr">Noodzakelijk, altijd aan</span></label></li>
      <li><span><b>Statistiek</b><small>Anoniem bezoek meten</small></span><label class="cks__sw"><input type="checkbox" data-cat="statistiek"><span class="cks__tr"></span><span class="cks__sr">Statistiek</span></label></li>
      <li><span><b>Marketing</b><small>Advertenties op andere sites</small></span><label class="cks__sw"><input type="checkbox" data-cat="marketing"><span class="cks__tr"></span><span class="cks__sr">Marketing</span></label></li>
    </ul>
    <div class="cks__btns">
      <button type="button" class="cks__btn" data-act="all">Alles accepteren</button>
      <button type="button" class="cks__btn" data-act="none">Alleen noodzakelijk</button>
    </div>
    <button type="button" class="cks__save" data-act="save">Voorkeuren opslaan</button>
  </div>
  <button type="button" class="cks__reopen" hidden>Cookie-instellingen</button>
  <p class="cks__toast" role="status"></p>
</div>
</div>

/* Cookiebanner als hoekkaart · NedDev · eigen werk. */
.cks{position:relative;width:100%;align-self:flex-start;flex:none;height:500px;background:#f2f4ef;color:#18241b;font-family:'Switzer',sans-serif;overflow:hidden;box-sizing:border-box}
.cks *{box-sizing:border-box}
.cks__page{position:absolute;inset:0;display:flex;flex-direction:column}
.cks__nav{display:flex;align-items:center;gap:24px;padding:16px 32px;background:#fff;font-size:14px;color:#3f4e43}
.cks__nav b{font-size:20px;color:#18241b;margin-right:12px}
.cks__cart{margin-left:auto;font-weight:600}
.cks__hero{flex:1;padding:40px 32px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;text-align:right;background:linear-gradient(90deg,transparent 40%,rgba(46,125,79,.12) 40%),repeating-linear-gradient(135deg,#f2f4ef 0 22px,#ebeee7 22px 44px)}
.cks__k{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#2e7d4f}
.cks__t{font-size:clamp(26px,3.4vw,42px);font-weight:800;line-height:1.05;letter-spacing:-.02em;max-width:15ch;margin:10px 0 18px}
.cks__b{background:#18241b;color:#fff;padding:12px 18px;border-radius:4px;font-weight:600;font-size:14px}
.cks__card{position:absolute;left:20px;bottom:20px;width:360px;max-height:calc(100% - 40px);overflow:auto;background:#fff;border:1px solid #d6ddd2;border-radius:6px;box-shadow:0 20px 40px -20px rgba(24,36,27,.45);padding:20px;z-index:3;transition:opacity .25s ease,transform .25s ease}
.cks.is-done .cks__card{opacity:0;transform:translateY(12px);visibility:hidden;transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
.cks__h{font-weight:800;font-size:17px;margin:0 0 6px}
.cks__d{font-size:13px;line-height:1.5;color:#4b5a4f;margin:0 0 12px}
.cks__d a{color:#2e7d4f}
.cks__opts{list-style:none;margin:0 0 14px;padding:0}
.cks__opts li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid #edf0ea}
.cks__opts b{display:block;font-size:14px}
.cks__opts small{display:block;font-size:12px;color:#6a786d}
.cks__sw{position:relative;flex:none;cursor:pointer}
.cks__sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:inherit}
.cks__tr{display:block;width:40px;height:22px;border-radius:999px;background:#c9d1c6;position:relative;transition:background .2s ease}
.cks__tr::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s ease}
.cks__sw input:checked+.cks__tr{background:#2e7d4f}
.cks__sw input:checked+.cks__tr::after{transform:translateX(18px)}
.cks__sw input:focus-visible+.cks__tr{outline:2px solid #18241b;outline-offset:2px}
.cks__sw.is-lock{cursor:not-allowed;opacity:.65}
.cks__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cks__btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cks__btn{font:700 14px 'Switzer',sans-serif;color:#fff;background:#18241b;border:1px solid #18241b;border-radius:4px;padding:11px 8px;cursor:pointer;transition:background .2s ease}
.cks__btn:hover,.cks__btn:focus-visible{background:#2e7d4f;border-color:#2e7d4f}
.cks__save{display:block;width:100%;margin-top:8px;font:600 13px 'Switzer',sans-serif;color:#18241b;background:transparent;border:1px solid #c9d1c6;border-radius:4px;padding:9px;cursor:pointer}
.cks__save:hover{background:#f2f4ef}
.cks__reopen{position:absolute;left:20px;bottom:20px;font:600 13px 'Switzer',sans-serif;color:#18241b;background:#fff;border:1px solid #c9d1c6;border-radius:999px;padding:9px 14px;cursor:pointer;z-index:2}
.cks__toast{position:absolute;right:20px;bottom:20px;margin:0;background:#18241b;color:#fff;font-size:13px;padding:10px 14px;border-radius:4px;opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;pointer-events:none;max-width:calc(100% - 40px)}
.cks__toast.is-on{opacity:1;transform:none}
@media(max-width:640px){
.cks__nav span{display:none}.cks__nav .cks__cart{display:inline}.cks__nav{padding:12px 16px}
.cks__hero{padding:24px 16px;align-items:flex-start;text-align:left;justify-content:flex-start}
.cks__card{left:10px;right:10px;bottom:10px;width:auto;padding:16px}
.cks__toast{left:10px;right:10px;bottom:64px}
.cks__reopen{left:10px;bottom:10px}}
@media(prefers-reduced-motion:reduce){.cks__card,.cks__toast,.cks__tr,.cks__tr::after{transition:none}}

// Cookiebanner als hoekkaart · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.cks');if(!w)return;
var card=w.querySelector('.cks__card'),re=w.querySelector('.cks__reopen'),toast=w.querySelector('.cks__toast'),tt=null;
var boxes=w.querySelectorAll('input[data-cat]');
function finish(){
  var on=['noodzakelijk'];boxes.forEach(function(b){if(b.checked)on.push(b.getAttribute('data-cat'));});
  w.classList.add('is-done');re.hidden=false;
  toast.textContent='Opgeslagen: '+on.join(', ');toast.classList.add('is-on');clearTimeout(tt);tt=setTimeout(function(){toast.classList.remove('is-on');},2600);
  re.focus({preventScroll:true});
  // Hier zet je in productie de toestemming door (bv. gtag consent update), pas NA deze keuze scripts laden.
}
w.querySelectorAll('[data-act]').forEach(function(btn){btn.addEventListener('click',function(){
  var a=btn.getAttribute('data-act');
  if(a==='all')boxes.forEach(function(b){b.checked=true;});
  if(a==='none')boxes.forEach(function(b){b.checked=false;});
  finish();});});
re.addEventListener('click',function(){w.classList.remove('is-done');re.hidden=true;var f=card.querySelector('input:not([disabled])');if(f)f.focus({preventScroll:true});});
w.addEventListener('click',function(e){var a=e.target.closest('a[href="#"]');if(a)e.preventDefault();});
}
init(document.querySelector('.jouw-container'));

More page sections

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 →