Insigne verdiend New

Reward moment in a customer area: a medal spins into view, lands with a small bounce, a single shine passes over it and four short strokes spring off. Beside it you read what you earned it for and how far you are from the next one. Click the medal to see it again. Use it in a customer portal, a gym member area, a course platform or after a first review. With reduced motion the medal is simply there.

Eerste review geplaatst

Bedankt, Sanne. Je review van Fysio Leidsche Rijn helpt anderen kiezen.

Nog 2 reviews tot Vaste gast

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.

<!-- Insigne verdiend · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="k7i">
  <button class="k7i__medal" type="button" aria-label="Insigne Eerste review, nog eens laten zien">
    <span class="k7i__lint k7i__lint--l"></span><span class="k7i__lint k7i__lint--r"></span>
    <span class="k7i__disc"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5 9.5 17 19 7.5" fill="none" stroke="#0a0a0a" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="k7i__glans"></span></span>
    <span class="k7i__ray" style="--a:-70deg"></span><span class="k7i__ray" style="--a:-25deg"></span><span class="k7i__ray" style="--a:25deg"></span><span class="k7i__ray" style="--a:70deg"></span>
  </button>
  <div class="k7i__txt">
    <p class="k7i__h">Eerste review geplaatst</p>
    <p class="k7i__p">Bedankt, Sanne. Je review van Fysio Leidsche Rijn helpt anderen kiezen.</p>
    <p class="k7i__next">Nog 2 reviews tot Vaste gast</p>
    <span class="k7i__bar" aria-hidden="true"><span></span></span>
  </div>
</div>
</div>

/* Insigne verdiend · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.k7i{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:18px;padding:12px 16px}
.k7i *{box-sizing:border-box}
.k7i__medal{position:relative;flex:none;width:96px;height:132px;padding:0;border:0;border-radius:8px;background:none;cursor:pointer}
.k7i__medal:focus-visible{outline:2px solid #0a0a0a;outline-offset:3px}
.k7i__lint{position:absolute;top:70px;width:22px;height:52px;background:#0a0a0a;clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}
.k7i__lint--l{left:24px;transform:rotate(14deg)}
.k7i__lint--r{right:24px;transform:rotate(-14deg)}
.k7i__disc{position:absolute;left:4px;top:4px;width:88px;height:88px;display:grid;place-items:center;border-radius:50%;background:#F5480F;border:5px solid #0a0a0a;overflow:hidden}
.k7i__disc::before{content:'';position:absolute;inset:6px;border:2px dashed rgba(10,10,10,.45);border-radius:50%}
.k7i__disc svg{position:relative;width:38px;height:38px}
.k7i__glans{position:absolute;top:-20px;left:-40px;width:22px;height:140px;background:rgba(255,255,255,.55);transform:rotate(25deg) translateX(-30px);opacity:0}
.k7i__ray{position:absolute;left:48px;top:48px;width:3px;height:9px;margin:-4px 0 0 -1px;background:#F5480F;border-radius:2px;opacity:0;transform:rotate(var(--a)) translateY(-56px)}
.k7i.is-play .k7i__medal{animation:k7i-val .9s cubic-bezier(.3,1.2,.5,1) both}
@keyframes k7i-val{0%{transform:translateY(-150px) rotateY(0deg);opacity:0}15%{opacity:1}65%{transform:translateY(6px) rotateY(540deg)}82%{transform:translateY(-4px) rotateY(720deg)}100%{transform:none}}
.k7i.is-play .k7i__glans{animation:k7i-glans .7s .95s ease-in-out}
@keyframes k7i-glans{0%{opacity:1;transform:rotate(25deg) translateX(-30px)}100%{opacity:1;transform:rotate(25deg) translateX(150px)}}
.k7i.is-play .k7i__ray{animation:k7i-ray .5s .9s ease-out}
@keyframes k7i-ray{0%{opacity:1;transform:rotate(var(--a)) translateY(-50px) scaleY(.4)}100%{opacity:0;transform:rotate(var(--a)) translateY(-64px)}}
.k7i__txt{flex:1;min-width:0;max-width:210px}
.k7i__h{margin:0 0 4px;font-size:15px;font-weight:700;line-height:1.3}
.k7i__p{margin:0 0 10px;font-size:13px;line-height:1.45;color:#3d3d3d}
.k7i__next{margin:0 0 6px;font-size:12px;font-weight:600}
.k7i__bar{display:block;height:6px;background:#e6e3de;border-radius:3px;overflow:hidden}
.k7i__bar span{display:block;width:33%;height:100%;background:#0a0a0a;border-radius:3px}
.k7i.is-play .k7i__bar span{animation:k7i-bar .6s 1s ease-out both}
@keyframes k7i-bar{from{width:0}}
@media (prefers-reduced-motion:reduce){.k7i.is-play .k7i__medal,.k7i.is-play .k7i__glans,.k7i.is-play .k7i__ray,.k7i.is-play .k7i__bar span{animation:none}}

// Insigne verdiend · © 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('.k7i'); if (!w) return;
    var medal = w.querySelector('.k7i__medal');
    function play() { w.classList.remove('is-play'); void w.offsetWidth; w.classList.add('is-play'); }
    medal.addEventListener('click', play);
    if ('IntersectionObserver' in window) {
      var io = new IntersectionObserver(function (es) { es.forEach(function (e) { if (e.isIntersecting) { play(); io.disconnect(); } }); }, { threshold: .5 });
      io.observe(w);
    } else play();
}
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 →