Actiebalk met feitelijke deadline New

Announcement bar with a real deadline (end of net metering in NL) and the days remaining, no ticking clock. Dismissable and remembered via localStorage in try/catch; copy discount code with success and error states. Collapses via grid-template-rows 1fr to 0fr; demo buttons show the states just before and after the deadline.

Code BATTERIJ26 Plan installatie

Deventer · Apeldoorn · Zutphen

Uw zonnestroom zelf gebruiken, ook na 2027.

Een thuisbatterij slaat overdag op wat u ’s avonds verbruikt. Wij rekenen eerst uit of het voor uw dak loont, met uw eigen jaarverbruik.

Thuisbatterij 10 kWh: vanaf € 5.490,00
Installatie: 1 dag, inclusief aanmelding
Garantie: 10 jaar op de batterij

Demo, bekijk de balk op

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.

<!-- Actiebalk met feitelijke deadline · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="adl">
  <div class="adl__wrap" aria-hidden="false">
    <div class="adl__clip">
      <div class="adl__bar" role="region" aria-label="Aankondiging">
        <p class="adl__txt"><span class="adl__days"></span> <span class="adl__msg"></span></p>
        <div class="adl__acts">
          <span class="adl__code">Code <b>BATTERIJ26</b><button type="button" class="adl__copy">Kopieer</button></span>
          <a class="adl__link" href="#">Plan installatie</a>
          <button type="button" class="adl__x" aria-label="Melding sluiten"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 3l10 10M13 3L3 13"/></svg></button>
        </div>
      </div>
    </div>
  </div>
  <div class="adl__nav"><span class="adl__logo"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2"/></svg>Zonwerk Energie</span><span class="adl__links"><a href="#">Zonnepanelen</a><a href="#">Thuisbatterij</a><a href="#">Laadpaal</a><a href="#">Over ons</a></span><a class="adl__tel" href="tel:0570123456">0570 12 34 56</a></div>
  <div class="adl__hero">
    <div><p class="adl__eyebrow">Deventer · Apeldoorn · Zutphen</p><h2 class="adl__h">Uw zonnestroom zelf gebruiken, ook na 2027.</h2><p class="adl__lead">Een thuisbatterij slaat overdag op wat u ’s avonds verbruikt. Wij rekenen eerst uit of het voor uw dak loont, met uw eigen jaarverbruik.</p></div>
    <dl class="adl__facts"><div><dt>Thuisbatterij 10 kWh</dt><dd>vanaf € 5.490,00</dd></div><div><dt>Installatie</dt><dd>1 dag, inclusief aanmelding</dd></div><div><dt>Garantie</dt><dd>10 jaar op de batterij</dd></div></dl>
  </div>
  <div class="adl__demo" role="group" aria-label="Demo: datum van vandaag">
    <span>Demo, bekijk de balk op</span>
    <button type="button" class="adl__d" data-day="" aria-pressed="true">Vandaag</button>
    <button type="button" class="adl__d" data-day="2026-12-01" aria-pressed="false">di 1 dec</button>
    <button type="button" class="adl__d" data-day="2026-12-05" aria-pressed="false">za 5 dec (na deadline)</button>
    <button type="button" class="adl__d adl__d--re">Balk opnieuw tonen</button>
  </div>
  <p class="adl__live" aria-live="polite"></p>
</div>
</div>

/* Actiebalk met feitelijke deadline · NedDev · eigen werk. */
/* fonts (Fontshare): manrope@400,600,800 */
.adl{--navy:#12263a;--ink:#14202b;--mut:#55626e;--yel:#f7d046;--yel2:#ffe27a;--grn:#1f6b43;--line:#dfe3e7;background:#fff;color:var(--ink);font-family:'Manrope','Switzer',sans-serif;box-sizing:border-box}
.adl *,.adl *::before{box-sizing:border-box}
.adl__wrap{display:grid;grid-template-rows:1fr;transition:grid-template-rows .28s ease}
.adl__wrap.is-closed{grid-template-rows:0fr}
.adl__clip{overflow:hidden;min-height:0}
.adl__bar{display:flex;align-items:center;justify-content:space-between;gap:10px 22px;flex-wrap:wrap;padding:10px 24px 10px 32px;background:var(--yel);color:var(--ink)}
.adl.is-urgent .adl__bar{background:#ffcf33}
.adl.is-after .adl__bar{background:#e8eef3}
.adl__txt{margin:0;font-size:14.5px;line-height:1.45;font-weight:600;max-width:72ch}
.adl__days{display:inline-block;font-weight:800;background:var(--ink);color:var(--yel);padding:1px 8px;border-radius:3px;margin-right:4px;font-variant-numeric:tabular-nums}
.adl__days:empty{display:none}
.adl__acts{display:flex;align-items:center;gap:10px}
.adl__code{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.adl__code b{font-family:'JetBrains Mono',monospace;font-weight:700;letter-spacing:.04em;border:1.5px dashed var(--ink);padding:3px 7px;border-radius:3px;user-select:all}
.adl.is-after .adl__code{display:none}
.adl__copy,.adl__x,.adl__d{font:700 13px 'Manrope',sans-serif;color:var(--ink);background:transparent;border:1.5px solid var(--ink);border-radius:3px;padding:5px 9px;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.adl__copy:hover{background:var(--ink);color:var(--yel)}
.adl__copy.is-ok{background:var(--grn);border-color:var(--grn);color:#fff}
.adl__copy.is-err{background:#fff;border-color:#a3271b;color:#a3271b}
.adl__link{font-weight:800;font-size:14px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.adl__link:hover{text-decoration-thickness:2px}
.adl__x{display:grid;place-items:center;width:32px;height:32px;padding:0;border-color:transparent}
.adl__x svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}
.adl__x:hover{background:rgba(20,32,43,.12)}
.adl__x:active{background:rgba(20,32,43,.2)}
.adl__copy:focus-visible,.adl__x:focus-visible,.adl__link:focus-visible,.adl__d:focus-visible,.adl__nav a:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.adl__nav{display:flex;align-items:center;gap:24px;padding:16px 32px;border-bottom:1px solid var(--line)}
.adl__logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px;color:var(--navy)}
.adl__logo svg{width:22px;height:22px;fill:none;stroke:#d9a400;stroke-width:2;stroke-linecap:round}
.adl__links{display:flex;gap:20px;margin-left:auto}
.adl__links a,.adl__tel{font-size:14px;font-weight:600;color:var(--ink);text-decoration:none}
.adl__links a:hover,.adl__tel:hover{text-decoration:underline;text-underline-offset:3px}
.adl__tel{color:var(--grn);font-weight:800}
.adl__hero{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end;max-width:1180px;margin:0 auto;padding:38px 32px 30px}
.adl__eyebrow{margin:0 0 10px;font:500 11px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--grn)}
.adl__h{margin:0 0 12px;font-weight:800;font-size:clamp(28px,3.4vw,42px);line-height:1.06;letter-spacing:-.02em;color:var(--navy);max-width:18ch}
.adl__lead{margin:0;font-size:15.5px;line-height:1.55;color:var(--mut);max-width:50ch}
.adl__facts{margin:0;display:grid;gap:0;border-top:2px solid var(--navy)}
.adl__facts div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.adl__facts dt{color:var(--mut)}.adl__facts dd{margin:0;font-weight:700;text-align:right}
.adl__demo{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 32px;padding:12px 0 6px;border-top:1px dashed var(--line);font:500 11px 'JetBrains Mono',monospace;color:var(--mut)}
.adl__d{font:500 11px 'JetBrains Mono',monospace;border:1px solid var(--line);color:var(--mut);padding:5px 8px}
.adl__d:hover{border-color:var(--ink);color:var(--ink)}
.adl__d[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.adl__d--re{margin-left:auto}
.adl__live{margin:0 32px 18px;font-size:12.5px;color:var(--mut);min-height:18px}
@media (max-width:760px){
  .adl__bar{padding:10px 12px 10px 14px;align-items:flex-start}
  .adl__txt{font-size:13.5px;flex:1 1 100%}
  .adl__acts{flex-wrap:wrap;width:100%}
  .adl__x{margin-left:auto}
  .adl__nav{padding:12px 14px}
  .adl__links{display:none}
  .adl__tel{margin-left:auto}
  .adl__hero{grid-template-columns:1fr;padding:26px 14px 22px;gap:20px}
  .adl__demo{margin:0 14px}.adl__live{margin:0 14px 14px}
  .adl__d--re{margin-left:0}
}
@media (prefers-reduced-motion:reduce){.adl *,.adl__wrap{transition:none!important}}

// Actiebalk met feitelijke deadline · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
const w=root.querySelector('.adl'); if(!w) return;
const K='nd-lab-adl-gesloten-saldering2027';
const wrap=w.querySelector('.adl__wrap'), days=w.querySelector('.adl__days'), msg=w.querySelector('.adl__msg'), live=w.querySelector('.adl__live'), x=w.querySelector('.adl__x'), cp=w.querySelector('.adl__copy'), link=w.querySelector('.adl__link');
let today=new Date();
const render=()=>{const t=new Date(today.getFullYear(),today.getMonth(),today.getDate()); const dl=new Date(2026,11,4); const left=Math.round((dl-t)/864e5);
  w.classList.toggle('is-after',left<0); w.classList.toggle('is-urgent',left>=0&&left<=7);
  if(left<0){days.textContent=''; msg.textContent='De salderingsregeling stopt op 1 januari 2027. Installaties die u nu plant, worden in januari geplaatst.'; link.textContent='Bekijk de planning';}
  else{days.textContent=left===0?'Vandaag':'Nog '+left+(left===1?' dag':' dagen'); msg.textContent='De salderingsregeling stopt op 1 januari 2027. Thuisbatterij vóór die tijd werkend? Plan uiterlijk vr 4 december.'; link.textContent='Plan installatie';}
};
const closed=()=>{try{return localStorage.getItem(K)==='1';}catch(e){return false;}};
const setClosed=v=>{wrap.classList.toggle('is-closed',v); wrap.setAttribute('aria-hidden',v?'true':'false'); wrap.querySelectorAll('a,button').forEach(el=>el.tabIndex=v?-1:0);
  try{v?localStorage.setItem(K,'1'):localStorage.removeItem(K);}catch(e){}};
x.addEventListener('click',()=>{setClosed(true); live.textContent='Melding gesloten. Die blijft weg bij uw volgende bezoek.';});
w.addEventListener('keydown',e=>{if(e.key==='Escape'&&wrap.contains(document.activeElement)){setClosed(true); live.textContent='Melding gesloten.';}});
cp.addEventListener('click',async()=>{cp.classList.remove('is-ok','is-err');
  try{if(!navigator.clipboard) throw 0; await navigator.clipboard.writeText('BATTERIJ26'); cp.classList.add('is-ok'); cp.textContent='Gekopieerd'; live.textContent='Code BATTERIJ26 gekopieerd: € 150,00 korting op de installatie.';}
  catch(e){cp.classList.add('is-err'); cp.textContent='Lukt niet'; live.textContent='Kopiëren lukt niet in deze browser. Selecteer de code en kopieer hem zelf.'; const r=document.createRange(); r.selectNodeContents(w.querySelector('.adl__code b')); const s=getSelection(); s.removeAllRanges(); s.addRange(r);}
  setTimeout(()=>{cp.classList.remove('is-ok','is-err'); cp.textContent='Kopieer';},2400);});
const demo=[...w.querySelectorAll('.adl__d[data-day]')];
demo.forEach(b=>b.addEventListener('click',()=>{today=b.dataset.day?new Date(b.dataset.day+'T09:00'):new Date(); demo.forEach(o=>o.setAttribute('aria-pressed',o===b?'true':'false')); render(); live.textContent='Balk zoals hij er uitziet op '+(b.dataset.day?b.textContent:'vandaag')+'.';}));
w.querySelector('.adl__d--re').addEventListener('click',()=>{setClosed(false); live.textContent='Melding staat weer aan.';});
w.querySelectorAll('a[href="#"]').forEach(a=>a.addEventListener('click',e=>e.preventDefault()));
render(); if(closed()) setClosed(true);
}
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 →