Integraties-raster met filter New

Grid of integrations as text logos (Exact, Mollie, Moneybird, Google Calendar, WhatsApp and more) with a category filter and search. For software showing what it connects to.

Knipt · afspraaksoftware voor kappers en salons

Werkt met wat je al gebruikt.

Zoek een koppeling

Exact OnlineBoekhouding

Kassabonnen en facturen per dag naar je grootboek.

moneybirdBoekhouding

Omzet per medewerker als aparte boeking.

e-Boekhouden.nlBoekhouding

Btw-tarieven voor diensten en producten apart.

TwinfieldBoekhouding

Voor salons met meerdere vestigingen en een accountant.

SnelStartBoekhouding

Dagafsluiting met één klik geëxporteerd.

mollieBetalen

Aanbetaling via iDEAL bij online boeken.

SumUpBetalen

Pinbedrag komt vanzelf op de kassabon.

TikkieBetalen

Betaalverzoek bij een no-show, met één tik.

Google AgendaAgenda

Afspraken op je telefoon, in twee richtingen.

OutlookAgenda

Vrije dagen uit Outlook blokkeren je agenda.

Apple AgendaAgenda

Via een privé-agendalink, zonder app.

WhatsAppBerichten

Herinnering 24 uur vooraf. 41% minder no-shows.

SMSBerichten

Voor klanten zonder WhatsApp, € 0,07 per bericht.

mailchimpMarketing

Klanten die 8 weken niet kwamen in een eigen lijst.

Google BedrijfsprofielMarketing

Boekknop direct in Google Maps.

InstagramMarketing

Boek-knop in je profiel en in stories.

How to use it

Paste the HTML where the page sections 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.

<!-- Integraties-raster met filter · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="irs">
  <div class="irs__in">
    <div class="irs__head">
      <div><span class="irs__eye">Knipt · afspraaksoftware voor kappers en salons</span>
      <h2 class="irs__h">Werkt met wat je al gebruikt.</h2></div>
      <label class="irs__search"><span class="irs__sr">Zoek een koppeling</span><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="6.5" fill="none" stroke="currentColor" stroke-width="2"/><path d="m16 16 4.5 4.5" stroke="currentColor" stroke-width="2"/></svg><input type="search" placeholder="Zoek, bv. Mollie"></label>
    </div>
    <div class="irs__chips" role="group" aria-label="Categorie"><button type="button" class="is-on" data-c="alle">Alle</button><button type="button" data-c="Boekhouding">Boekhouding</button><button type="button" data-c="Betalen">Betalen</button><button type="button" data-c="Agenda">Agenda</button><button type="button" data-c="Berichten">Berichten</button><button type="button" data-c="Marketing">Marketing</button></div>
    <div class="irs__grid">
      <a href="#" class="irs__tile" data-c="Boekhouding"><span class="irs__logo irs__logo--a">Exact Online</span><span class="irs__cat">Boekhouding</span><p>Kassabonnen en facturen per dag naar je grootboek.</p></a>
      <a href="#" class="irs__tile" data-c="Boekhouding"><span class="irs__logo irs__logo--b">moneybird</span><span class="irs__cat">Boekhouding</span><p>Omzet per medewerker als aparte boeking.</p></a>
      <a href="#" class="irs__tile" data-c="Boekhouding"><span class="irs__logo irs__logo--c">e-Boekhouden.nl</span><span class="irs__cat">Boekhouding</span><p>Btw-tarieven voor diensten en producten apart.</p></a>
      <a href="#" class="irs__tile" data-c="Boekhouding"><span class="irs__logo irs__logo--e">Twinfield</span><span class="irs__cat">Boekhouding</span><p>Voor salons met meerdere vestigingen en een accountant.</p></a>
      <a href="#" class="irs__tile" data-c="Boekhouding"><span class="irs__logo irs__logo--d">SnelStart</span><span class="irs__cat">Boekhouding</span><p>Dagafsluiting met één klik geëxporteerd.</p></a>
      <a href="#" class="irs__tile" data-c="Betalen"><span class="irs__logo irs__logo--b">mollie</span><span class="irs__cat">Betalen</span><p>Aanbetaling via iDEAL bij online boeken.</p></a>
      <a href="#" class="irs__tile" data-c="Betalen"><span class="irs__logo irs__logo--d">SumUp</span><span class="irs__cat">Betalen</span><p>Pinbedrag komt vanzelf op de kassabon.</p></a>
      <a href="#" class="irs__tile" data-c="Betalen"><span class="irs__logo irs__logo--a">Tikkie</span><span class="irs__cat">Betalen</span><p>Betaalverzoek bij een no-show, met één tik.</p></a>
      <a href="#" class="irs__tile" data-c="Agenda"><span class="irs__logo irs__logo--c">Google Agenda</span><span class="irs__cat">Agenda</span><p>Afspraken op je telefoon, in twee richtingen.</p></a>
      <a href="#" class="irs__tile" data-c="Agenda"><span class="irs__logo irs__logo--a">Outlook</span><span class="irs__cat">Agenda</span><p>Vrije dagen uit Outlook blokkeren je agenda.</p></a>
      <a href="#" class="irs__tile" data-c="Agenda"><span class="irs__logo irs__logo--e">Apple Agenda</span><span class="irs__cat">Agenda</span><p>Via een privé-agendalink, zonder app.</p></a>
      <a href="#" class="irs__tile" data-c="Berichten"><span class="irs__logo irs__logo--d">WhatsApp</span><span class="irs__cat">Berichten</span><p>Herinnering 24 uur vooraf. 41% minder no-shows.</p></a>
      <a href="#" class="irs__tile" data-c="Berichten"><span class="irs__logo irs__logo--e">SMS</span><span class="irs__cat">Berichten</span><p>Voor klanten zonder WhatsApp, € 0,07 per bericht.</p></a>
      <a href="#" class="irs__tile" data-c="Marketing"><span class="irs__logo irs__logo--b">mailchimp</span><span class="irs__cat">Marketing</span><p>Klanten die 8 weken niet kwamen in een eigen lijst.</p></a>
      <a href="#" class="irs__tile" data-c="Marketing"><span class="irs__logo irs__logo--c">Google Bedrijfsprofiel</span><span class="irs__cat">Marketing</span><p>Boekknop direct in Google Maps.</p></a>
      <a href="#" class="irs__tile" data-c="Marketing"><span class="irs__logo irs__logo--a">Instagram</span><span class="irs__cat">Marketing</span><p>Boek-knop in je profiel en in stories.</p></a>
      <p class="irs__empty" hidden>Niet gevonden. Mail ons op koppelingen@voorbeeld.nl, we bouwen er elke maand een paar bij.</p>
    </div>
  </div>
</div>
</div>

/* Integraties-raster met filter · NedDev · eigen werk. */
.irs{background:#f3ede4;color:#161412;font-family:'Switzer',sans-serif;box-sizing:border-box}
.irs *{box-sizing:border-box}
.irs__in{max-width:1180px;margin:0 auto;padding:40px 32px}
.irs__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.irs__eye{font:500 11px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#d9472b}
.irs__h{font-size:clamp(26px,3.2vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:8px 0 0}
.irs__search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #d8cfc1;border-radius:999px;padding:0 14px;width:260px;max-width:100%}
.irs__search:focus-within{border-color:#161412}
.irs__search svg{width:16px;height:16px;color:#8a8073;flex:none}
.irs__search input{border:0;background:transparent;font:400 14px 'Switzer',sans-serif;color:#161412;padding:10px 0;width:100%;outline:none;min-width:0}
.irs__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.irs__chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.irs__chips button{font:600 13px 'Switzer',sans-serif;color:#161412;background:transparent;border:1px solid #d8cfc1;border-radius:999px;padding:7px 13px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.irs__chips button span{font:500 11px 'JetBrains Mono',monospace;opacity:.55;margin-left:5px}
.irs__chips button:hover{border-color:#161412}
.irs__chips button.is-on{background:#161412;color:#f3ede4;border-color:#161412}
.irs__chips button:focus-visible,.irs__tile:focus-visible{outline:2px solid #ff6b4a;outline-offset:2px}
.irs__grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #d8cfc1;border-left:1px solid #d8cfc1}
.irs__tile{background:#fbf8f3;border-right:1px solid #d8cfc1;border-bottom:1px solid #d8cfc1;padding:18px 18px 16px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:6px;min-height:132px;position:relative;transition:background .2s}
.irs__tile[hidden]{display:none}
.irs__tile::after{content:'Koppel in 2 min';position:absolute;right:14px;top:16px;font:500 10.5px 'JetBrains Mono',monospace;color:#d9472b;opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s}
.irs__tile:hover{background:#fff}
.irs__tile:hover::after{opacity:1;transform:none}
.irs__logo{font-size:20px;line-height:1.1;color:#161412}
.irs__logo--a{font-weight:700;letter-spacing:-.02em}
.irs__logo--b{font-weight:800;letter-spacing:-.045em;font-size:22px}
.irs__logo--c{font-weight:500;letter-spacing:-.01em}
.irs__logo--d{font-weight:900;letter-spacing:-.03em;font-style:italic}
.irs__logo--e{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:17px;letter-spacing:.02em;text-transform:uppercase}
.irs__cat{font:500 10.5px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;color:#8a8073}
.irs__tile p{margin:auto 0 0;font-size:13px;line-height:1.45;color:#4d463e}
.irs__empty{grid-column:1/-1;background:#fbf8f3;border-right:1px solid #d8cfc1;border-bottom:1px solid #d8cfc1;margin:0;padding:22px 18px;font-size:14px;color:#4d463e}
.irs__tile.is-in{animation:irs-in .3s ease both}
@keyframes irs-in{from{opacity:0}to{opacity:1}}
@media(max-width:960px){.irs__grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.irs__in{padding:28px 16px}.irs__search{width:100%}.irs__grid{grid-template-columns:repeat(2,1fr)}.irs__tile{padding:14px 12px;min-height:118px}.irs__logo{font-size:16px}.irs__logo--b{font-size:18px}.irs__logo--e{font-size:14px}.irs__tile p{font-size:12px}.irs__tile::after{display:none}}
@media(prefers-reduced-motion:reduce){.irs__tile.is-in{animation:none}.irs__tile::after{transition:none}}

// Integraties-raster met filter · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.irs');if(!w)return;
var tiles=w.querySelectorAll('.irs__tile'),chips=w.querySelectorAll('.irs__chips button'),q=w.querySelector('.irs__search input');var cat='alle';
chips.forEach(function(c){var k=c.getAttribute('data-c');var n=0;tiles.forEach(function(t){if(k==='alle'||t.getAttribute('data-c')===k)n++;});var s=document.createElement('span');s.textContent=n;c.appendChild(s);c.setAttribute('aria-pressed',c.classList.contains('is-on'));
 c.addEventListener('click',function(){cat=k;chips.forEach(function(x){x.classList.toggle('is-on',x===c);x.setAttribute('aria-pressed',x===c);});apply();});});
function apply(){var term=q.value.trim().toLowerCase();var n=0;tiles.forEach(function(t){var ok=(cat==='alle'||t.getAttribute('data-c')===cat)&&(!term||t.textContent.toLowerCase().indexOf(term)>-1);
 if(ok&&t.hidden){t.classList.remove('is-in');void t.offsetWidth;t.classList.add('is-in');}t.hidden=!ok;if(ok)n++;});w.querySelector('.irs__empty').hidden=n>0;}
q.addEventListener('input',apply);
tiles.forEach(function(t){t.addEventListener('click',function(e){e.preventDefault();});});
}
init(document.querySelector('.jouw-container'));

More page sections

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 →