Status als stempel Nieuw

<!-- Status als stempel · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="t7s">
<div class="t7s__card">
<h3 class="t7s__h">Bestelling 20481</h3>
<p class="t7s__r">Fietsenwinkel Van Dijk, Amersfoort</p>
<ul class="t7s__l"><li><span>Fietstas waterdicht, 2 stuks</span><span>€89,00</span></li><li><span>Montage op je drager</span><span>€25,00</span></li><li class="t7s__tot"><span>Totaal</span><span>€114,00</span></li></ul>
<div class="t7s__stamp" aria-hidden="true"><span class="t7s__sw">Betaald</span></div>
</div>
<div class="t7s__bar"><p class="t7s__st" role="status">Wacht op betaling</p><button class="t7s__btn" type="button">Betaling ontvangen</button></div>
</div>
</div>

/* Status als stempel · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.t7s{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:12px 18px;container-type:size;font-family:'Switzer',sans-serif;box-sizing:border-box}
.t7s__card{position:relative;padding:12px 14px;border:1px solid rgba(10,10,10,.14);border-radius:8px;background:#fff;overflow:hidden}
.t7s__card.is-hit{animation:t7s-jolt .32s ease-out .18s}
.t7s__h{margin:0;font-weight:700;font-size:clamp(15px,4.4cqi,19px);line-height:1.2;color:#0a0a0a}
.t7s__r{margin:2px 0 8px;font-size:12px;color:#5a5a5a}
.t7s__l{list-style:none;margin:0;padding:0;font-size:clamp(12px,3.2cqi,14px);color:#2a2a2a}
.t7s__l li{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-variant-numeric:tabular-nums}
.t7s__tot{border-top:1px solid rgba(10,10,10,.14);margin-top:3px;padding-top:6px!important;font-weight:700;color:#0a0a0a}
.t7s__stamp{position:absolute;right:7%;top:16%;padding:4px 10px;border:3px solid #F5480F;border-radius:4px;color:#F5480F;font-weight:900;font-size:clamp(20px,7.4cqi,34px);line-height:1;letter-spacing:.01em;opacity:0;transform:rotate(-9deg);pointer-events:none;
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='70'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.2 0 0 0 2.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='70'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.2 0 0 0 2.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");-webkit-mask-size:160px 70px;mask-size:160px 70px}
.t7s__stamp.is-on{opacity:.92}
.t7s__stamp.is-slam{animation:t7s-slam .5s cubic-bezier(.5,0,.6,1) both}
.t7s__stamp.is-z{color:#0a0a0a;border-color:#0a0a0a}
@keyframes t7s-slam{0%{opacity:0;transform:translateY(-20px) scale(2.3) rotate(-3deg)}55%{opacity:.95;transform:scale(.93) rotate(-10deg)}75%{transform:scale(1.03) rotate(-8.6deg)}100%{opacity:.92;transform:scale(1) rotate(-9deg)}}
@keyframes t7s-jolt{0%,100%{transform:none}30%{transform:translate(1px,2px)}60%{transform:translate(-1px,-1px)}}
.t7s__bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.t7s__st{margin:0;font-size:clamp(12px,3.2cqi,14px);color:#3a3a3a}
.t7s__btn{flex:none;min-height:32px;padding:7px 12px;border:0;border-radius:4px;background:#0a0a0a;color:#fff;font:600 13px/1.2 'Switzer',sans-serif;cursor:pointer;transition:background-color .16s,color .16s}
.t7s__btn:hover{background:#F5480F;color:#0a0a0a}
.t7s__btn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
@media (prefers-reduced-motion: reduce){.t7s__stamp.is-slam,.t7s__card.is-hit{animation:none}}

// Status als stempel · © 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('.t7s'),card=w.querySelector('.t7s__card'),stamp=w.querySelector('.t7s__stamp'),sw=w.querySelector('.t7s__sw'),st=w.querySelector('.t7s__st'),btn=w.querySelector('.t7s__btn');
var S=[{w:'Betaald',s:'Bestelling 20481 is betaald',b:'Pakket ingepakt'},{w:'Ingepakt',s:'Bestelling 20481 is ingepakt',b:'Meegegeven aan PostNL'},{w:'Verzonden',s:'Verzonden, morgen tussen 10.00 en 13.00 uur bezorgd',b:'Opnieuw bekijken',z:1}],i=-1;
btn.addEventListener('click',function(){if(i>=S.length-1){i=-1;stamp.className='t7s__stamp';st.textContent='Wacht op betaling';btn.textContent='Betaling ontvangen';return;}
i++;var s=S[i];stamp.className='t7s__stamp';card.classList.remove('is-hit');void stamp.offsetWidth;sw.textContent=s.w;stamp.className='t7s__stamp is-on is-slam'+(s.z?' is-z':'');card.classList.add('is-hit');st.textContent=s.s;btn.textContent=s.b;});
}
init(document.querySelector('.jouw-container'));