Bento Feature Grid

Asymmetric bento layout with dark hero tile, beton tiles and accent card.

/ alles op zijn plek

Een platform dat past.

/ core

Snelheid is geen feature.
Het is de basis.

Edge-rendering, geoptimaliseerde assets, sub-seconde laadtijd. Standaard.

0.4s LCP

/ design

Maatwerk UI

Geen sjablonen.

/ seo

Vindbaar

Top-3 gericht.

/ infra

Geharde hosting & 24/7 monitoring

Hetzner + Cloudflare, security-stack en alerts op elk project.

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.

<!-- Bento Feature Grid · NedDev · eigen werk. -->
<div class="jouw-container">
<section class="bfg">
  <div class="bfg__inner">
    <header class="bfg__head"><span class="bfg__eyebrow">/ alles op zijn plek</span><h2 class="bfg__h2">Een platform dat past.</h2></header>
    <div class="bfg__grid">
      <article class="bfg__cell bfg__cell--big bfg__dark">
        <span class="bfg__tag">/ core</span>
        <h3>Snelheid is geen feature.<br>Het is de basis.</h3>
        <p>Edge-rendering, geoptimaliseerde assets, sub-seconde laadtijd. Standaard.</p>
        <span class="bfg__metric">0.4s <small>LCP</small></span>
      </article>
      <article class="bfg__cell bfg__beton"><span class="bfg__tag">/ design</span><h4>Maatwerk UI</h4><p>Geen sjablonen.</p></article>
      <article class="bfg__cell bfg__accent"><span class="bfg__tag">/ seo</span><h4>Vindbaar</h4><p>Top-3 gericht.</p></article>
      <article class="bfg__cell bfg__beton bfg__wide"><span class="bfg__tag">/ infra</span><h4>Geharde hosting & 24/7 monitoring</h4><p>Hetzner + Cloudflare, security-stack en alerts op elk project.</p></article>
    </div>
  </div>
</section>
</div>

/* Bento Feature Grid · NedDev · eigen werk. */
.bfg{width:100%;box-sizing:border-box;background:#fff;color:#0a0a0a;border-bottom:1px solid rgba(10,10,10,.12)}
.bfg__inner{max-width:900px;margin:0 auto;padding:48px 28px;box-sizing:border-box}
.bfg__eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;color:#F5480F}
.bfg__h2{font-family:'Boldonse','Switzer',sans-serif;font-weight:400;font-size:clamp(28px,4vw,42px);letter-spacing:-.02em;margin:12px 0 28px;line-height:1}
.bfg__grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:128px;gap:14px}
.bfg__cell{border-radius:6px;padding:22px;box-sizing:border-box;overflow:hidden;display:flex;flex-direction:column;border:1px solid rgba(10,10,10,.12);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.bfg__cell:hover{transform:translateY(-4px)}
.bfg__cell--big{grid-column:span 2;grid-row:span 2;justify-content:flex-end}
.bfg__wide{grid-column:span 1;grid-row:span 1}
.bfg__tag{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;opacity:.7}
.bfg__cell h3{font-family:'Boldonse',sans-serif;font-weight:400;font-size:clamp(20px,2.6vw,30px);line-height:1.02;margin:0 0 10px;letter-spacing:-.01em}
.bfg__cell h4{font-family:'Switzer',sans-serif;font-weight:600;font-size:16px;margin:auto 0 6px}
.bfg__cell p{font-family:'Switzer',sans-serif;font-size:13px;line-height:1.45;margin:0;opacity:.8}
.bfg__dark{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.bfg__dark .bfg__tag{color:#F5480F;opacity:1}
.bfg__metric{font-family:'Boldonse',sans-serif;font-size:30px;color:#F5480F;margin-top:14px}
.bfg__metric small{font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(255,255,255,.5)}
.bfg__beton{background:#f4f3f1}
.bfg__accent{background:#F5480F;color:#0a0a0a;border-color:#F5480F}
.bfg__accent .bfg__tag{opacity:.8}
@media(max-width:720px){.bfg__grid{grid-template-columns:1fr 1fr;grid-auto-rows:120px}.bfg__cell--big{grid-column:span 2}}

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 →