Insigne verdiend Nieuw

Beloningsmoment in een klantomgeving: een medaille valt draaiend in beeld, landt met een klein veertje, er trekt één glansstreep over en er schieten vier korte streepjes af. Ernaast staat waarvoor je hem kreeg en hoeveel je nog nodig hebt voor de volgende. Klik op de medaille om het nog eens te zien. Inzetten in een klantportaal, ledenomgeving van een sportschool, cursusplatform of bij een eerste review. Bij minder beweging staat de medaille er meteen.

Eerste review geplaatst

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

Nog 2 reviews tot Vaste gast

Zo gebruik je het

Plak de HTML op de plek waar het onderdeel moet komen.
Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.

<!-- 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'));

Meer uit componenten

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →