Hero waarin je het licht aandoet New

A dark living room with a light switch in view; flip it (click, tap, space or enter) and the lamps flicker on, the room warms up and the offer appears. A real switch with role="switch" and aria-checked. Use it as the hero of a lighting shop, electrician, smart lighting installer or energy supplier. With reduced motion the light comes on without flicker.

Woonkamer in de avond met hanglampen boven een houten tafel

Licht dat een kamer warm maakt

Doe het licht maar aan.

Lampenwinkel Brandpunt in Den Bosch. Gratis lichtadvies bij je thuis.

Plan lichtadvies

How to use it

Paste the HTML where the hero styles 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.

<!-- Hero waarin je het licht aandoet · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="hlk">
<img class="hlk__img" src="https://neddev.com/lab-media/hk-lichtknop-1.webp" alt="Woonkamer in de avond met hanglampen boven een houten tafel" width="1376" height="768">
<div class="hlk__shade" aria-hidden="true"></div>
<button class="hlk__sw" type="button" role="switch" aria-checked="false" aria-label="Licht"><span class="hlk__rk" aria-hidden="true"></span></button>
<div class="hlk__txt">
<h2 class="hlk__h">Licht dat een kamer warm maakt</h2>
<p class="hlk__p hlk__p--uit">Doe het licht maar aan.</p>
<div class="hlk__aan"><p class="hlk__p">Lampenwinkel Brandpunt in Den Bosch. Gratis lichtadvies bij je thuis.</p>
<a class="hlk__cta" href="#hk-lichtknop" tabindex="-1">Plan lichtadvies</a></div>
</div>
</div>
</div>

/* Hero waarin je het licht aandoet · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.hlk{position:absolute;inset:0;overflow:hidden;background:#0a0a0a;color:#fff;font-family:'Switzer',sans-serif;container-type:size;text-align:left}
.hlk *,.hlk *::before,.hlk *::after{box-sizing:border-box}
.hlk__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.13) saturate(.3) contrast(1.1);transition:filter .9s ease}
.hlk.is-on .hlk__img{filter:none}
.hlk.is-flick .hlk__img{animation:hlk-flik .55s steps(1) both}
@keyframes hlk-flik{0%{filter:brightness(.6) saturate(.8)}18%{filter:brightness(.15) saturate(.3)}34%{filter:brightness(.85)}48%{filter:brightness(.25) saturate(.4)}64%{filter:none}100%{filter:none}}
.hlk__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.7),rgba(10,10,10,0) 70%);opacity:0;transition:opacity .9s ease}
.hlk.is-on .hlk__shade{opacity:1}
.hlk__txt{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:62%;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.hlk__h{margin:0;font:700 clamp(20px,6.6cqi,42px)/1.04 'Switzer',sans-serif;letter-spacing:-.025em;color:#8a8680;transition:color .9s ease;text-wrap:balance}
.hlk.is-on .hlk__h{color:#fff}
.hlk__p{margin:0;font:400 clamp(12px,2.9cqi,15px)/1.4 'Switzer',sans-serif;color:#eceae6}
.hlk__p--uit{color:#bdb8b0}
.hlk__aan{display:flex;flex-direction:column;align-items:flex-start;gap:8px;opacity:0;transform:translateY(6px);transition:opacity .5s ease .5s,transform .5s ease .5s;visibility:hidden}
.hlk.is-on .hlk__aan{opacity:1;transform:none;visibility:visible}
.hlk.is-on .hlk__p--uit{display:none}
.hlk__cta{padding:9px 14px;background:#F5480F;color:#0a0a0a;border-radius:4px;font:600 13px/1 'Switzer',sans-serif;text-decoration:none;transition:background-color .16s}
.hlk__cta:hover{background:#ff6a36}
.hlk__cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hlk__sw{position:absolute;right:clamp(16px,6cqi,48px);top:50%;transform:translateY(-50%);width:52px;height:70px;padding:9px 11px;border:0;border-radius:4px;background:#efece7;box-shadow:0 4px 14px rgba(0,0,0,.45);cursor:pointer}
.hlk__sw::before{content:'';position:absolute;left:50%;top:50%;width:68px;height:68px;transform:translate(-50%,-50%);border-radius:8px;border:2px solid rgba(245,72,15,.0);animation:hlk-hint 2.4s ease-in-out infinite}
.hlk.is-on .hlk__sw::before{animation:none}
@keyframes hlk-hint{0%,100%{border-color:rgba(245,72,15,0)}50%{border-color:rgba(245,72,15,.9)}}
.hlk__rk{display:block;width:100%;height:100%;border-radius:4px;background:linear-gradient(180deg,#d6d2cb 0 50%,#fbfaf8 50% 100%);box-shadow:inset 0 -2px 0 rgba(0,0,0,.12);transition:background .15s}
.hlk__sw[aria-checked="true"] .hlk__rk{background:linear-gradient(180deg,#fbfaf8 0 50%,#d6d2cb 50% 100%);box-shadow:inset 0 2px 0 rgba(0,0,0,.12)}
.hlk__sw:focus-visible{outline:3px solid #F5480F;outline-offset:4px}
@container (max-width:420px){.hlk__sw{width:44px;height:60px;padding:8px 9px}.hlk__sw::before{width:58px;height:58px}}
@media (prefers-reduced-motion:reduce){.hlk__img,.hlk__aan,.hlk__h,.hlk__shade{transition:none}.hlk.is-flick .hlk__img,.hlk__sw::before{animation:none}}

// Hero waarin je het licht aandoet · © 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){
const w=root.querySelector('.hlk');if(!w)return;
const sw=w.querySelector('.hlk__sw'),cta=w.querySelector('.hlk__cta'),rm=matchMedia('(prefers-reduced-motion: reduce)').matches;let tm=0;
sw.addEventListener('click',()=>{const on=sw.getAttribute('aria-checked')!=='true';sw.setAttribute('aria-checked',on);clearTimeout(tm);
cta.tabIndex=on?0:-1;w.classList.remove('is-flick');
if(on){if(!rm){void w.offsetWidth;w.classList.add('is-flick');tm=setTimeout(()=>w.classList.remove('is-flick'),600);}w.classList.add('is-on');}else w.classList.remove('is-on');});
}
init(document.querySelector('.jouw-container'));

More hero styles

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 →