Lege staten met één actie New

Three empty states (no search results, empty cart, no messages yet), each with its own line-style SVG illustration, one sentence on how to fill it and exactly one action. The action reveals the filled state. Tabs work with arrow keys; no new browser features required.

Geen resultaten voor "dakkapel Ede"

In Ede zelf is nu niemand vrij. In de rest van Gelderland wel.

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.

<!-- Lege staten met één actie · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="les">
<div class="les__tabs" role="tablist" aria-label="Voorbeelden lege staat"><button type="button" role="tab" class="les__tab" aria-selected="true">Zoeken</button><button type="button" role="tab" class="les__tab" aria-selected="false" tabindex="-1">Winkelwagen</button><button type="button" role="tab" class="les__tab" aria-selected="false" tabindex="-1">Berichten</button></div>
<div class="les__panel" role="tabpanel" tabindex="0">
<div class="les__empty"><svg class="les__art" viewBox="0 0 96 72" aria-hidden="true"><rect x="10" y="12" width="52" height="40" rx="3" class="les__fill"/><path d="M18 22h28M18 30h20M18 38h24"/><circle cx="60" cy="42" r="13" class="les__paper"/><path d="M69.5 51.5L82 64"/><path d="M55 37l10 10M65 37L55 47" class="les__acc"/></svg>
<p class="les__h">Geen resultaten voor "dakkapel Ede"</p><p class="les__p">In Ede zelf is nu niemand vrij. In de rest van Gelderland wel.</p><button type="button" class="les__btn">Zoek in heel Gelderland</button></div>
<div class="les__full" hidden><p class="les__meta">8 vakmensen in Gelderland</p><ul class="les__rows"><li><b>Dakwerken Van Beek</b><span>Wageningen · 9,1</span></li><li><b>Kapelbouw Oost</b><span>Arnhem · 8,7</span></li><li><b>Timmerbedrijf Hendriks</b><span>Barneveld · 8,9</span></li></ul><button type="button" class="les__reset">Toon lege staat</button></div>
</div>
<div class="les__panel" role="tabpanel" tabindex="0" hidden>
<div class="les__empty"><svg class="les__art" viewBox="0 0 96 72" aria-hidden="true"><path d="M26 26h44l-4 34H30z" class="les__fill"/><path d="M38 26v-6a10 10 0 0 1 20 0v6"/><path d="M42 42h12" class="les__acc"/><path d="M14 64h68"/></svg>
<p class="les__h">Je winkelwagen is nog leeg</p><p class="les__p">Alles wat je toevoegt zie je hier, met de verzendkosten er al bij.</p><button type="button" class="les__btn">Bekijk de najaarscollectie</button></div>
<div class="les__full" hidden><p class="les__meta">1 artikel</p><ul class="les__rows"><li><b>Linnen kussenhoes · zand</b><span>€ 29,95</span></li><li class="les__sum"><b>Totaal incl. verzending</b><span>€ 34,90</span></li></ul><button type="button" class="les__reset">Toon lege staat</button></div>
</div>
<div class="les__panel" role="tabpanel" tabindex="0" hidden>
<div class="les__empty"><svg class="les__art" viewBox="0 0 96 72" aria-hidden="true"><path d="M14 14h44a4 4 0 0 1 4 4v22a4 4 0 0 1-4 4H32l-10 9v-9h-8a4 4 0 0 1-4-4V18a4 4 0 0 1 4-4z" class="les__fill"/><path d="M66 28h12a4 4 0 0 1 4 4v18a4 4 0 0 1-4 4h-4v8l-9-8H50a4 4 0 0 1-4-4v-2"/><path d="M22 26h28M22 33h18" class="les__acc"/></svg>
<p class="les__h">Nog geen berichten</p><p class="les__p">Stel je vraag over je afspraak, de salon antwoordt meestal binnen een uur.</p><button type="button" class="les__btn">Stuur een bericht</button></div>
<div class="les__full" hidden><p class="les__meta">Salon Mira · Utrecht</p><div class="les__bubble">Hoi! Kan mijn afspraak van do 16 okt een uur later?</div><p class="les__tick">Verzonden 14:02</p><button type="button" class="les__reset">Toon lege staat</button></div>
</div>
<span class="les__sr" aria-live="polite"></span>
</div>
</div>

/* Lege staten met één actie · NedDev · eigen werk. */
.les{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;box-sizing:border-box;text-align:left}
.les *,.les *::before,.les *::after{box-sizing:border-box}
.les__tabs{flex:none;display:flex;gap:2px;padding:8px 10px 0;border-bottom:1px solid #e6e3df;overflow-x:auto;scrollbar-width:none}
.les__tab{font:500 12px/1 'Switzer',system-ui,sans-serif;color:#5c5a57;background:none;border:0;border-bottom:2px solid transparent;padding:8px 10px 9px;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s}
.les__tab:hover{color:#0a0a0a}
.les__tab[aria-selected="true"]{color:#0a0a0a;font-weight:600;border-bottom-color:#F5480F}
.les__tab:focus-visible{outline:2px solid #F5480F;outline-offset:-2px;border-radius:3px}
.les__panel{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;padding:12px 16px}
.les__panel[hidden]{display:none}
.les__panel:focus-visible{outline:2px solid #F5480F;outline-offset:-4px}
.les__empty{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:300px;margin:auto}
.les__empty[hidden],.les__full[hidden]{display:none}
.les__art{width:84px;height:63px;margin-bottom:6px;fill:none;stroke:#0a0a0a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.les__fill{fill:#f4f3f1}
.les__paper{fill:#fff}
.les__acc{stroke:#F5480F;stroke-width:2}
.les__h{margin:0 0 3px;font-size:15px;font-weight:600;line-height:1.3}
.les__p{margin:0 0 10px;font-size:12.5px;line-height:1.45;color:#5c5a57}
.les__btn{font:600 13px/1 'Switzer',system-ui,sans-serif;padding:10px 14px;border-radius:4px;border:1px solid #0a0a0a;background:#0a0a0a;color:#fff;cursor:pointer;transition:background .15s}
.les__btn:hover{background:#2e2c2a}
.les__btn:focus-visible,.les__reset:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.les__btn:active{transform:translateY(1px)}
.les__full{width:100%;max-width:320px;margin:auto}
.les__meta{margin:0 0 6px;font:500 10px/1.2 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#5c5a57}
.les__rows{list-style:none;margin:0 0 8px;padding:0}
.les__rows li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid #eeebe7;font-size:13px}
.les__rows b{font-weight:600}
.les__rows span{color:#3d3b38;font-variant-numeric:tabular-nums;white-space:nowrap}
.les__sum{border-bottom:0}
.les__bubble{margin-left:auto;max-width:85%;background:#0a0a0a;color:#fff;padding:9px 12px;border-radius:12px 12px 2px 12px;font-size:13px;line-height:1.4}
.les__tick{margin:4px 0 8px;text-align:right;font:500 10px/1.2 'JetBrains Mono',ui-monospace,monospace;color:#5c5a57}
.les__reset{font:500 11px/1 'JetBrains Mono',ui-monospace,monospace;color:#5c5a57;background:none;border:0;padding:4px 0;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.les__reset:hover{color:#0a0a0a}
.les__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

// Lege staten met één actie · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.les');if(!w)return;
var tabs=[].slice.call(w.querySelectorAll('.les__tab')),panels=[].slice.call(w.querySelectorAll('.les__panel')),sr=w.querySelector('.les__sr'),uid='les'+Math.random().toString(36).slice(2,8);
tabs.forEach(function(t,i){t.id=uid+'t'+i;panels[i].id=uid+'p'+i;t.setAttribute('aria-controls',panels[i].id);panels[i].setAttribute('aria-labelledby',t.id);});
function sel(i,focus){tabs.forEach(function(t,j){var on=i===j;t.setAttribute('aria-selected',on?'true':'false');t.tabIndex=on?0:-1;panels[j].hidden=!on;});if(focus)tabs[i].focus();}
tabs.forEach(function(t,i){t.addEventListener('click',function(){sel(i);});t.addEventListener('keydown',function(e){var n=null;if(e.key==='ArrowRight')n=(i+1)%tabs.length;else if(e.key==='ArrowLeft')n=(i-1+tabs.length)%tabs.length;else if(e.key==='Home')n=0;else if(e.key==='End')n=tabs.length-1;if(n!==null){e.preventDefault();sel(n,true);}});});
panels.forEach(function(p){var em=p.querySelector('.les__empty'),fu=p.querySelector('.les__full');
 p.querySelector('.les__btn').addEventListener('click',function(){em.hidden=true;fu.hidden=false;sr.textContent='Gevuld voorbeeld getoond';fu.querySelector('.les__reset').focus();});
 p.querySelector('.les__reset').addEventListener('click',function(){fu.hidden=true;em.hidden=false;sr.textContent='Lege staat getoond';p.querySelector('.les__btn').focus();});});
}
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 →