Bestelling bevestigd met kassabon New

Thank-you page after an order: a receipt jerks out of a printer slot line by line, like a real receipt printer, with the total at the bottom and a check next to Paid. Beside it the confirmation and when the parcel arrives. Click the receipt to print it again. The receipt is a real table, so screen readers read the amounts normally. Use it on the confirmation page of a web shop, a restaurant ordering site or a point of sale. With reduced motion the receipt is shown right away.

Bonte Boon, Utrecht

Molen M2	€ 249,00
Bonen 1 kg	€ 24,50
Bezorgen	€ 0,00
Totaal	€ 273,50

Betaald met iDEAL

Bestelling geplaatst

De bevestiging staat in je mail. Voor 22:00 besteld, dus morgen in huis.

Bestelnummer 20481

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.

<!-- Bestelling bevestigd met kassabon · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="k7k">
  <div class="k7k__scene">
    <span class="k7k__slot" aria-hidden="true"></span>
    <div class="k7k__clip">
      <div class="k7k__bon" tabindex="0" role="group" aria-label="Kassabon, klik of druk op Enter om opnieuw te printen">
        <p class="k7k__shop">Bonte Boon, Utrecht</p>
        <table class="k7k__tab"><tbody>
          <tr><td>Molen M2</td><td>€ 249,00</td></tr>
          <tr><td>Bonen 1 kg</td><td>€ 24,50</td></tr>
          <tr><td>Bezorgen</td><td>€ 0,00</td></tr>
          <tr class="k7k__tot"><td>Totaal</td><td>€ 273,50</td></tr>
        </tbody></table>
        <p class="k7k__paid"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12.5 4.5 4.5L19 7.5" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>Betaald met iDEAL</p>
      </div>
    </div>
  </div>
  <div class="k7k__txt">
    <p class="k7k__h">Bestelling geplaatst</p>
    <p class="k7k__p">De bevestiging staat in je mail. Voor 22:00 besteld, dus morgen in huis.</p>
    <p class="k7k__nr">Bestelnummer 20481</p>
  </div>
</div>
</div>

/* Bestelling bevestigd met kassabon · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.k7k{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;text-align:left;gap:14px;padding:10px 12px}
.k7k *{box-sizing:border-box}
.k7k__scene{position:relative;flex:none;width:152px;height:184px}
.k7k__slot{position:absolute;left:0;right:0;top:0;height:12px;background:#0a0a0a;border-radius:4px;z-index:2}
.k7k__slot::after{content:'';position:absolute;left:10px;right:10px;bottom:3px;height:2px;background:#555}
.k7k__clip{position:absolute;left:6px;right:6px;top:9px;bottom:0;overflow:hidden}
.k7k__bon{position:relative;padding:8px 8px 16px;background:#fff;border:1px solid rgba(10,10,10,.18);border-top:0;font-size:12px;line-height:1.35;color:#0a0a0a;cursor:pointer;clip-path:polygon(0 0,100% 0,100% 100%,92% 96%,83% 100%,75% 96%,67% 100%,58% 96%,50% 100%,42% 96%,33% 100%,25% 96%,17% 100%,8% 96%,0 100%)}
.k7k__bon:focus-visible{outline:2px solid #F5480F;outline-offset:-3px}
.k7k__shop{margin:0 0 5px;padding-bottom:5px;white-space:nowrap;border-bottom:1px dashed rgba(10,10,10,.35);font-weight:700;text-align:center}
.k7k__tab{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.k7k__tab td{padding:1px 0;white-space:nowrap}
.k7k__tab td+td{text-align:right}
.k7k__tot td{padding-top:5px;border-top:1px dashed rgba(10,10,10,.35);font-weight:700}
.k7k__paid{display:flex;align-items:center;gap:4px;margin:6px 0 0;white-space:nowrap;color:#b8360a;font-weight:600}
.k7k__paid svg{width:14px;height:14px;flex:none}
.k7k__txt{flex:1;min-width:0;max-width:200px}
.k7k__h{margin:0 0 4px;font-size:15px;font-weight:700;line-height:1.3}
.k7k__p{margin:0 0 8px;font-size:13px;line-height:1.45;color:#3d3d3d}
.k7k__nr{margin:0;font-size:12px;color:#4d4d4d}

// Bestelling bevestigd met kassabon · © 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('.k7k'); if (!w) return;
    var bon = w.querySelector('.k7k__bon'), rm = matchMedia('(prefers-reduced-motion: reduce)').matches, an = null;
    function print() {
      if (!bon.animate || rm) return;
      if (an) an.cancel();
      var h = bon.offsetHeight, steps = 9, kf = [{ transform: 'translateY(' + (-h) + 'px)', offset: 0 }];
      for (var i = 1; i <= steps; i++) {
        var y = -h + h * i / steps, o = i / steps * .92;
        kf.push({ transform: 'translateY(' + y.toFixed(1) + 'px)', offset: Math.max(0, o - .05), easing: 'linear' });
        kf.push({ transform: 'translateY(' + y.toFixed(1) + 'px)', offset: o });
      }
      kf.push({ transform: 'translateY(4px)', offset: .96 }); kf.push({ transform: 'translateY(0)', offset: 1 });
      an = bon.animate(kf, { duration: 2200, fill: 'both', easing: 'linear' });
    }
    bon.addEventListener('click', print);
    bon.addEventListener('keydown', function (e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); print(); } });
    if (rm) return;
    if ('IntersectionObserver' in window) {
      bon.style.transform = 'translateY(-110%)';
      var io = new IntersectionObserver(function (es) { es.forEach(function (e) { if (e.isIntersecting) { bon.style.transform = ''; print(); io.disconnect(); } }); }, { threshold: .5 });
      io.observe(w);
    } else print();
}
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 →