Copy & Paste • Zero-dependency • Builder-proof

Premium HTML Components

Plakbare bouwstenen die werken in Duda, Wix, Strato, WordPress, Webflow en Shopify. Lichtgewicht, snel en aanpasbaar via data-attributes en CSS-variabelen.

Ultra Hero Slider Nieuw v1.0
Ultra Hero Slider
Ken Burns + parallax + swipe. Toetsenbord-navigatie, dots en autoplay. Werkt overal.
~8.2 KB · A11y OK €39
Koop
Stuur via data-autoplay , data-height , data-kenburns , data-parallax .
Pricing Table Pro v1.0
Pricing Table Pro
3-koloms tabel, “Meest gekozen” ribbon, nette mobile stack en snelle styling via CSS-variabelen.
~5.1 KB · Schema Product €39
Koop
Testimonials Carousel v1.0
Testimonials Carousel
Sterren, avatars, auto-scroll met pauze-op-hover, schema-optie. Snel en superlicht.
~4.4 KB · A11y OK €29
Koop
FAQ Accordion v1.0
FAQ Accordion SEO+
Smooth accordion met FAQPage JSON-LD, deeplinks en open-state onthouden.
~3.1 KB · SEO+ €29
Koop
Sticky Smart Topbar v1.1
Sticky Smart Topbar
UTM-aware message, dismiss met localStorage, optionele countdown. CTR-booster.
~3.8 KB · CTR+ €19
Koop
Exit Intent Lead Magnet v1.0
Exit-Intent Lead Magnet
A11y-proof modal met focus-trap, escape en cookie-cap. Zero-dependency.
~3.6 KB · Leads+ €24
Koop

Licenties & updates

Kies wat past; abonnement is incl. updates & support.

Solo
1 website • e-mail support binnen 48u
  • Copy-paste code
  • Gebruik op 1 domein
  • Basis updates
Koop €39 €6/m
Pro
Tot 10 websites • support binnen 24u
  • Whitelabel gids
  • Prioritaire updates
  • Nieuwe releases p/m
Koop €149 €19/m
Agency
Onbeperkt • whitelabel • support binnen 8u
  • Onbeperkt domeinen
  • Early access
  • Partnerkortingen
Koop €399 €39/m
in strings const safeOut = s => (s||'').trim().replace(/<\/script/gi,'<\\/script>'); // Filters const chips=$$('#dd-filters .chip'), cards=$$('#dd-grid .card'); chips.forEach(ch=> ch.addEventListener('click', ()=>{ chips.forEach(c=>c.classList.remove('active')); ch.classList.add('active'); const f=ch.dataset.filter; cards.forEach(card=> card.classList.toggle('hide', !(f==='all' || card.dataset.cat===f)) ); })); // Modal const modal=$('#dd-modal'), title=$('#dd-modal-title'), codeEl=$('#dd-code'), note=$('#dd-note'); const open=(ttl,code,isDemo)=>{ title.textContent=ttl; codeEl.textContent=safeOut(code); note.textContent=isDemo?'Live demo – deze HTML kun je 1:1 plakken.':'Kopieer & plak in een HTML/Embed blok.'; modal.classList.add('show'); document.body.style.overflow='hidden'; }; const close=()=>{ modal.classList.remove('show'); document.body.style.overflow=''; }; $('#dd-close').addEventListener('click',close); modal.addEventListener('click',e=>{ if(e.target===modal) close(); }); $('#dd-copy').addEventListener('click',async()=>{ try{ await navigator.clipboard.writeText(codeEl.textContent); const b=$('#dd-copy'); const t=b.textContent; b.textContent='Gekopieerd ✔'; setTimeout(()=>b.textContent=t,1200);}catch(e){ alert('Kopiëren niet gelukt.'); } }); // Snippets (met gesplitste zodat builders niet crashen) const snippets = { hero: `

Websites die wél verkopen

Sneller live. Meer leads. Minder gedoe.

Plan een belafspraak

Premium HTML Components

Hero sliders, pricing, reviews, calculators en meer.

Bekijk demo

95+ Lighthouse score

Lichtgewicht, toegankelijk, zero-dependency.

Koop direct
(()=>{"use strict";const $=(s,r=document)=>r.querySelector(s),$$=(s,r=document)=>[...r.querySelectorAll(s)],slider=$(".ud-slider");if(!slider)return;const track=$(".ud-track",slider),slides=$$(".ud-slide",track),dotsWrap=$(".ud-dots",slider),prev=$(".ud-prev",slider),next=$(".ud-next",slider),opts={autoplay:+slider.dataset.autoplay||0,pauseOnHover:slider.dataset.pauseOnHover==="true",loop:slider.dataset.loop!=="false",kenburns:slider.dataset.kenburns==="true",parallax:slider.dataset.parallax==="true"};let idx=0,timer=null,w=slider.clientWidth,isDown=false,startX=0,deltaX=0;function update(i,jump=false){idx=(i+slides.length)%slides.length;const x=-idx*w;track.style.transition=jump?"none":"transform .6s cubic-bezier(.2,.8,.2,1)";track.style.transform=\`translate3d(\${x}px,0,0)\`;[...dotsWrap.children].forEach((d,di)=>d.setAttribute('aria-current',di===idx));$$(".ud-slide",track).forEach((s,si)=>s.style.setProperty('--kb',opts.kenburns&&si===idx?1.08:1))}slides.forEach((_,i)=>{const b=document.createElement('button');b.type='button';b.ariaLabel=\`Ga naar slide \${i+1}\`;b.addEventListener('click',()=>{stop();update(i);start();});dotsWrap.appendChild(b)});new ResizeObserver(()=>{w=slider.clientWidth;update(idx,true)}).observe(slider);prev.addEventListener('click',()=>{stop();update(idx-1);start();});next.addEventListener('click',()=>{stop();update(idx+1);start();});function start(){if(!opts.autoplay)return;stop();timer=setInterval(()=>update(idx+1),opts.autoplay)}function stop(){if(timer){clearInterval(timer);timer=null}}if(opts.pauseOnHover){slider.addEventListener('mouseenter',stop);slider.addEventListener('mouseleave',start)}slider.setAttribute('tabindex','0');slider.addEventListener('keydown',e=>{if(e.key==='ArrowLeft')prev.click();if(e.key==='ArrowRight')next.click();});track.addEventListener('pointerdown',e=>{isDown=true;startX=e.clientX;deltaX=0;track.style.transition='none';stop();});window.addEventListener('pointermove',e=>{if(!isDown)return;deltaX=e.clientX-startX;track.style.transform=\`translate3d(\${-idx*w+deltaX}px,0,0)\`;});window.addEventListener('pointerup',()=>{if(!isDown)return;isDown=false;if(Math.abs(deltaX)>w*0.15)update(idx+(deltaX<0?1:-1));else update(idx);start();});update(0,true);start();})(); `, pricing: `

Starter

€ 19/m
  • 1 component/maand
  • E-mail support 48u
  • Updates
Kies Starter
Meest gekozen

Pro

€ 59/m
  • Alle components
  • 24u support
  • Nieuwe releases
Kies Pro

Agency

€ 149/m
  • Onbeperkt domeinen
  • Whitelabel
  • Prioriteit
Kies Agency
`, testimonials: `
Super snel en werkt overal. Leads +35%.
Anne — Studio A
Code kopiëren, plakken, klaar. Perfect!
Joris — Webbureau J
Core Web Vitals gingen meteen omhoog.
Sara — GrowthX
(()=>{const w=document.querySelector('.dd-tc'); if(!w)return;const t=w.querySelector('.dd-track');const slides=[...t.children];let i=0,timer=null,wEl=w.clientWidth;function go(n){i=(n+slides.length)%slides.length; t.style.transform=\`translate3d(\${-i*wEl}px,0,0)\`;} w.querySelectorAll('nav button')[0].onclick=()=>{stop();go(i-1);start();}; w.querySelectorAll('nav button')[1].onclick=()=>{stop();go(i+1);start();}; new ResizeObserver(()=>{wEl=w.clientWidth;go(i)}).observe(w); function start(){const ms=+w.dataset.autoplay||0; if(!ms) return; stop(); timer=setInterval(()=>go(i+1),ms)} function stop(){ if(timer) clearInterval(timer) } start();})(); `, faq: `
Werkt dit in elke websitebuilder?
Ja. Plak de HTML in een embed/HTML blok. Geen externe libraries nodig.
Kan ik zelf kleuren aanpassen?
Ja, via CSS-variabelen en data-attributes in de snippet.
Hoe zit het met licenties?
Solo (1 site), Pro (10 sites), Agency (onbeperkt).
{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Werkt dit in elke websitebuilder?","acceptedAnswer":{"@type":"Answer","text":"Ja. Plak de HTML in een embed/HTML blok. Geen externe libraries nodig."}},{"@type":"Question","name":"Kan ik zelf kleuren aanpassen?","acceptedAnswer":{"@type":"Answer","text":"Ja, via CSS-variabelen en data-attributes in de snippet."}},{"@type":"Question","name":"Hoe zit het met licenties?","acceptedAnswer":{"@type":"Answer","text":"Solo (1 site), Pro (10 sites), Agency (onbeperkt)."}}]} `, topbar: `
(()=>{const id='dd-topbar-dismiss'; if(localStorage.getItem(id)) return; const el=document.getElementById('dd-topbar'); const txt=el.dataset.text||'Deal'; const btn=el.dataset.btn||'Bekijk', href=el.dataset.href||'#'; el.innerHTML=\`
\${txt} \${btn} ×
\`; el.querySelector('.x').onclick=()=>{ localStorage.setItem(id,'1'); el.remove(); };})(); `, exit: ` (()=>{const root=document.getElementById('dd-exit'); let shown=false; function open(){ if(shown) return; shown=true; root.setAttribute('open',''); root.hidden=false; const btn=root.querySelector('[data-close]'); btn&&btn.addEventListener('click',close); trap(); } function close(){ root.removeAttribute('open'); root.hidden=true; untrap(); } function onExit(e){ if(e.clientY<=0) open(); } setTimeout(()=>{ document.addEventListener('mouseout',onExit,{once:true}); }, 1200); function trap(){ const focusables=[...root.querySelectorAll('a,button,input')]; let i=0; (focusables[0]).focus(); root.addEventListener('keydown',ev=>{ if(ev.key==='Escape') close(); if(ev.key==='Tab'){ ev.preventDefault(); i=(i+(ev.shiftKey?-1:1)+focusables.length)%focusables.length; focusables[i].focus(); }}); } function untrap(){} })(); ` }; // Bind knoppen (code/demo/checkout) $$('#dd-grid .btn, #licenties .btn').forEach(btn=>{ const codeKey=btn.dataset.code, demoKey=btn.dataset.demo, priceId=btn.dataset.checkout; if(codeKey){ btn.addEventListener('click', ()=> open(btn.closest('.card').querySelector('.title').textContent+' — Code', snippets[codeKey], false)); } if(demoKey){ btn.addEventListener('click', ()=> open(btn.closest('.card').querySelector('.title').textContent+' — Demo', snippets[demoKey], true)); } if(priceId){ btn.addEventListener('click', (e)=>{ e.preventDefault(); alert('Stripe koppelen: vervang data-checkout met jouw price ID en voeg Stripe Checkout toe.'); }); } }); })();