Vergelijkende prijstabel

Feature comparison across three plans with sticky header row and check/dash.

/ vergelijk

Wat zit erin.

Feature	Start	Groei	Schaal
Maatwerk design
Aantal pagina's	1	10	∞
SEO + content
Monitoring 24/7
SaaS / webshop
Dedicated team
Vanaf	€950	€2450	€4900

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.
No JavaScript needed.

<!-- Vergelijkende prijstabel · NedDev · eigen werk. -->
<div class="jouw-container">
<section class="pcmp">
  <div class="pcmp__inner">
    <header class="pcmp__head"><span class="pcmp__eyebrow">/ vergelijk</span><h2 class="pcmp__h2">Wat zit erin.</h2></header>
    <div class="pcmp__scroll">
      <table class="pcmp__t">
        <thead><tr><th class="pcmp__feat">Feature</th><th>Start</th><th class="pcmp__hi">Groei</th><th>Schaal</th></tr></thead>
        <tbody>
          <tr><td>Maatwerk design</td><td data-y></td><td class="pcmp__hi" data-y></td><td data-y></td></tr>
          <tr><td>Aantal pagina's</td><td>1</td><td class="pcmp__hi">10</td><td>∞</td></tr>
          <tr><td>SEO + content</td><td data-n></td><td class="pcmp__hi" data-y></td><td data-y></td></tr>
          <tr><td>Monitoring 24/7</td><td data-n></td><td class="pcmp__hi" data-y></td><td data-y></td></tr>
          <tr><td>SaaS / webshop</td><td data-n></td><td class="pcmp__hi" data-n></td><td data-y></td></tr>
          <tr><td>Dedicated team</td><td data-n></td><td class="pcmp__hi" data-n></td><td data-y></td></tr>
          <tr class="pcmp__pricerow"><td>Vanaf</td><td>€950</td><td class="pcmp__hi">€2450</td><td>€4900</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</section>
</div>

/* Vergelijkende prijstabel · NedDev · eigen werk. */
.pcmp{width:100%;box-sizing:border-box;background:#fff;color:#0a0a0a;border-bottom:1px solid rgba(10,10,10,.12)}
.pcmp__inner{max-width:900px;margin:0 auto;padding:44px 28px;box-sizing:border-box}
.pcmp__head{margin-bottom:24px}
.pcmp__eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:#F5480F}
.pcmp__h2{font-family:'Boldonse','Switzer',sans-serif;font-weight:400;font-size:clamp(28px,4vw,42px);letter-spacing:-.02em;margin:12px 0 0;line-height:1}
.pcmp__scroll{overflow-x:auto}
.pcmp__t{width:100%;border-collapse:collapse;min-width:560px}
.pcmp__t th,.pcmp__t td{padding:14px 16px;text-align:center;border-bottom:1px solid rgba(10,10,10,.12)}
.pcmp__t thead th{position:sticky;top:0;background:#fff;font-family:'Switzer',sans-serif;font-weight:600;font-size:15px}
.pcmp__t th.pcmp__feat,.pcmp__t td:first-child{text-align:left;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.04em;color:#444}
.pcmp__t td{font-family:'Switzer',sans-serif;font-size:14px}
.pcmp__hi{background:#f4f3f1}
.pcmp__t thead th.pcmp__hi{color:#F5480F}
.pcmp__t td[data-y]:after{content:'✓';color:#F5480F;font-weight:700}
.pcmp__t td[data-n]:after{content:'·';color:#bbb}
.pcmp__pricerow td{font-family:'Boldonse',sans-serif;font-size:18px;border-top:2px solid #0a0a0a}
.pcmp__pricerow td:first-child{font-family:'JetBrains Mono',monospace;font-size:12px}

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 →