Bento-tegel groeit uit tot vlak New

Click a bento tile and it grows smoothly into a full panel with details; Esc or the close button puts it back, focus follows. View Transitions (document.startViewTransition with view-transition-class, all major browsers since Oct 2025); older browsers get a FLIP animation with the Web Animations API, reduced motion switches instantly.

How to use it

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

<!-- Bento-tegel groeit uit tot vlak · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="bgr">
  <div class="bgr__grid">
    <button class="bgr__t bgr__t--a" type="button" aria-expanded="false" data-p="0"><span class="bgr__n">01</span><b>Onderhoud</b><span class="bgr__s">vanaf € 129 per jaar</span></button>
    <button class="bgr__t bgr__t--b" type="button" aria-expanded="false" data-p="1"><span class="bgr__n">02</span><b>Storing</b><span class="bgr__s">binnen 4 uur</span></button>
    <button class="bgr__t bgr__t--c" type="button" aria-expanded="false" data-p="2"><span class="bgr__n">03</span><b>Advies</b><span class="bgr__s">gratis thuisbezoek</span></button>
    <button class="bgr__t bgr__t--d" type="button" aria-expanded="false" data-p="3"><span class="bgr__n">04</span><b>Subsidie</b><span class="bgr__s">ISDE 2026</span></button>
  </div>
  <div class="bgr__p bgr__t--a" role="region" aria-label="Onderhoud" hidden><span class="bgr__n">01</span><b class="bgr__ph">Onderhoud</b><p>Jaarlijkse beurt van je cv-ketel of warmtepomp, inclusief rookgasmeting en rapport. Vanaf € 129 per jaar, zonder voorrijkosten in Zwolle en Kampen.</p><button class="bgr__x" type="button">Sluiten <kbd>Esc</kbd></button></div>
  <div class="bgr__p bgr__t--b" role="region" aria-label="Storing" hidden><span class="bgr__n">02</span><b class="bgr__ph">Storing</b><p>Geen warm water of de ketel geeft een foutcode? Bel 038 123 4567, binnen vier uur staat er een monteur voor de deur, ook in het weekend.</p><button class="bgr__x" type="button">Sluiten <kbd>Esc</kbd></button></div>
  <div class="bgr__p bgr__t--c" role="region" aria-label="Advies" hidden><span class="bgr__n">03</span><b class="bgr__ph">Advies</b><p>We meten je woning in en rekenen uit of een hybride warmtepomp loont. Je krijgt binnen een week een offerte met terugverdientijd.</p><button class="bgr__x" type="button">Sluiten <kbd>Esc</kbd></button></div>
  <div class="bgr__p bgr__t--d" role="region" aria-label="Subsidie" hidden><span class="bgr__n">04</span><b class="bgr__ph">Subsidie</b><p>Wij vragen de ISDE-subsidie voor je aan. Voor een hybride warmtepomp is dat in 2026 gemiddeld € 1.900.</p><button class="bgr__x" type="button">Sluiten <kbd>Esc</kbd></button></div>
</div>
</div>

/* Bento-tegel groeit uit tot vlak · NedDev · eigen werk. */
.bgr{position:absolute;inset:0;padding:12px;background:#f4f3f1;font-family:'Switzer',system-ui,sans-serif;container-type:size}
.bgr__grid{display:grid;height:100%;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:8px}
.bgr__t{appearance:none;border:0;text-align:left;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:10px 12px;border-radius:6px;cursor:pointer;font:inherit;position:relative;transition:transform .16s}
.bgr__grid .bgr__t:hover{transform:translateY(-2px)}
.bgr__t:focus-visible,.bgr__x:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.bgr__t--a{grid-row:span 2;background:#0a0a0a;color:#fff}
.bgr__t--b{background:#F5480F;color:#0a0a0a}
.bgr__t--c{background:#fff;color:#0a0a0a;border:1px solid #dcd8d2}
.bgr__t--d{grid-column:span 2;background:#d9e3dc;color:#0a0a0a}
.bgr__t b{font-size:17px;letter-spacing:-.02em;line-height:1.1}
.bgr__n{position:absolute;top:10px;left:12px;font:500 10px 'JetBrains Mono',monospace;opacity:.8}
.bgr__s{font-size:11.5px;opacity:.85}
.bgr__p{position:absolute;inset:12px;border-radius:6px;padding:34px 16px 14px;display:flex;flex-direction:column;gap:8px;z-index:3;view-transition-class:bgr-vt}
.bgr__p[hidden]{display:none}
.bgr__ph{font-size:clamp(22px,8cqi,32px);letter-spacing:-.03em;line-height:1}
.bgr__p p{margin:0;font-size:13px;line-height:1.5;max-width:30em}
.bgr__x{appearance:none;align-self:flex-start;margin-top:auto;border:1px solid currentColor;background:transparent;color:inherit;font:600 12px 'Switzer',sans-serif;padding:7px 12px;border-radius:999px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.bgr__x kbd{font:500 9.5px 'JetBrains Mono',monospace;border:1px solid currentColor;border-radius:3px;padding:1px 4px;opacity:.75}
.bgr__p.is-in>*{animation:bgr-in .32s .12s cubic-bezier(.2,.7,.2,1) both}
@keyframes bgr-in{from{opacity:0;transform:translateY(6px)}}
::view-transition-group(*.bgr-vt){animation-duration:.42s;animation-timing-function:cubic-bezier(.3,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.bgr__p.is-in>*{animation:none}.bgr__t{transition:none}}
@container (max-width:360px){.bgr__t b{font-size:15px}.bgr__s{font-size:10.5px}}

// Bento-tegel groeit uit tot vlak · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.bgr')||root;
var tiles=[].slice.call(root.querySelectorAll('.bgr__grid .bgr__t')),panels=[].slice.call(root.querySelectorAll('.bgr__p'));
var rm=matchMedia('(prefers-reduced-motion: reduce)').matches,open=-1,uid='bgr'+Math.random().toString(36).slice(2,8);
function swap(i,show){var t=tiles[i],p=panels[i];
  if(show){t.style.viewTransitionName='';p.hidden=false;p.style.viewTransitionName=uid;t.setAttribute('aria-expanded','true');}
  else{p.style.viewTransitionName='';p.hidden=true;t.style.viewTransitionName=uid;t.setAttribute('aria-expanded','false');}}
function flip(from,to,rev){var a=from.getBoundingClientRect(),b=to.getBoundingClientRect();if(!to.animate||!a.width)return;
  var tr='translate('+(a.left-b.left)+'px,'+(a.top-b.top)+'px) scale('+(a.width/b.width)+','+(a.height/b.height)+')';
  to.style.transformOrigin='0 0';to.animate(rev?[{transform:'none'},{transform:tr}]:[{transform:tr},{transform:'none'}],{duration:420,easing:'cubic-bezier(.3,.7,.2,1)'});}
function go(i,show){var t=tiles[i],p=panels[i];
  if(rm){show?(p.hidden=false,t.setAttribute('aria-expanded','true')):(p.hidden=true,t.setAttribute('aria-expanded','false'));}
  else if(document.startViewTransition){if(show)t.style.viewTransitionName=uid;var vt=document.startViewTransition(function(){swap(i,show);});vt.finished.then(function(){t.style.viewTransitionName='';p.style.viewTransitionName='';});}
  else if(show){p.hidden=false;t.setAttribute('aria-expanded','true');flip(t,p);}
  else{var b=t.getBoundingClientRect(),a=p.getBoundingClientRect();t.setAttribute('aria-expanded','false');
    if(p.animate){p.style.transformOrigin='0 0';p.animate([{transform:'none'},{transform:'translate('+(b.left-a.left)+'px,'+(b.top-a.top)+'px) scale('+(b.width/a.width)+','+(b.height/a.height)+')'}],{duration:380,easing:'cubic-bezier(.3,.7,.2,1)'}).onfinish=function(){p.hidden=true;};}else p.hidden=true;}
  if(show){p.classList.add('is-in');open=i;setTimeout(function(){p.querySelector('.bgr__x').focus({preventScroll:true});},rm?0:60);}
  else{p.classList.remove('is-in');open=-1;t.focus({preventScroll:true});}}
tiles.forEach(function(t,i){t.addEventListener('click',function(){if(open<0)go(i,true);});});
panels.forEach(function(p,i){p.querySelector('.bgr__x').addEventListener('click',function(){go(i,false);});});
root.addEventListener('keydown',function(e){if(e.key==='Escape'&&open>=0){e.preventDefault();go(open,false);}});
}
init(document.querySelector('.jouw-container'));

More components

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 →