Kerngegevens-raster woning Nieuw

Feitenblok met label boven waarde (bouwjaar, m², energielabel, kamers) naast de woningfoto, met een energielabel-schaal in een popover (popover-API, met JS-fallback die hidden wisselt) en alle kenmerken in een uitklapblok. Werkt ook voor installateur of hotelkamer.

Jaren dertig hoekwoning met erker aan de Zomerkade in Haarlem

Beschikbaar · sinds vr 2 okt

Duinzicht Makelaars · Haarlem-Noord

Zomerkade 42

2023 KN Haarlem · Ter Kleef

€ 549.000 kosten koper

Bouwjaar: 1932
Woonoppervlakte: 118 m²
Perceel: 162 m²
Kamers: 5 waarvan 3 slaapkamers
Energielabel
Inhoud: 412 m³
Tuin: Zuidwest 14 m diep
Verwarming: CV-ketel 2019
Parkeren: Vergunning € 98 per jaar

Energielabel C, geregistreerd 14 mrt 2024

Met spouwmuurisolatie en HR++-glas in de erker komt de woning volgens het EP-online-rapport op label A.

Alle kenmerken

Soort woning: Eengezinswoning, hoekwoning
Bouwstijl: Jaren dertig, erker
Dak: Zadeldak, pannen 2011
Isolatie: Dak, vloer, deels dubbel glas
Badkamer: Inloopdouche, 2e toilet
Zolder: Vaste trap, 2 kamers
Eigendom: Volle eigendom
VvE: Niet van toepassing
Aanvaarding: In overleg, vanaf jan 2027
Schuur: Stenen berging 8 m²

Plan een bezichtiging Download brochure (PDF, 4,2 MB)

Zo gebruik je het

Plak de HTML op de plek waar het onderdeel moet komen.
Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.

<!-- Kerngegevens-raster woning · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="kgr">
  <div class="kgr__in">
    <div class="kgr__photo">
      <img class="kgr__img" src="https://neddev.com/lab-media/kerngegevens-raster-1.webp" alt="Jaren dertig hoekwoning met erker aan de Zomerkade in Haarlem" loading="lazy">
      <span class="kgr__status">Beschikbaar · sinds vr 2 okt</span>
    </div>
    <div class="kgr__body">
      <p class="kgr__crumb">Duinzicht Makelaars · Haarlem-Noord</p>
      <h2 class="kgr__h">Zomerkade 42</h2>
      <p class="kgr__place">2023 KN Haarlem · Ter Kleef</p>
      <p class="kgr__price">€ 549.000 <span>kosten koper</span></p>
      <dl class="kgr__grid">
        <div><dt>Bouwjaar</dt><dd>1932</dd></div>
        <div><dt>Woonoppervlakte</dt><dd>118 m²</dd></div>
        <div><dt>Perceel</dt><dd>162 m²</dd></div>
        <div><dt>Kamers</dt><dd>5 <small>waarvan 3 slaapkamers</small></dd></div>
        <div><dt>Energielabel</dt><dd><button type="button" class="kgr__label" popovertarget="kgr-scale" aria-controls="kgr-scale" aria-expanded="false"><span class="kgr__chip">C</span><span class="kgr__lbl-t">Bekijk schaal</span></button></dd></div>
        <div><dt>Inhoud</dt><dd>412 m³</dd></div>
        <div><dt>Tuin</dt><dd>Zuidwest <small>14 m diep</small></dd></div>
        <div><dt>Verwarming</dt><dd>CV-ketel <small>2019</small></dd></div>
        <div><dt>Parkeren</dt><dd>Vergunning <small>€ 98 per jaar</small></dd></div>
      </dl>
      <div class="kgr__scale" id="kgr-scale" popover>
        <p class="kgr__st">Energielabel C, geregistreerd 14 mrt 2024</p>
        <ol class="kgr__bars"><li style="--w:38%;--c:#009037">A</li><li style="--w:46%;--c:#55ab26">B</li><li class="is-on" style="--w:54%;--c:#c8d200">C</li><li style="--w:62%;--c:#ffec00">D</li><li style="--w:70%;--c:#f9b100">E</li><li style="--w:78%;--c:#e86a14">F</li><li style="--w:86%;--c:#e2001a">G</li></ol>
        <p class="kgr__sn">Met spouwmuurisolatie en HR++-glas in de erker komt de woning volgens het EP-online-rapport op label A.</p>
        <button type="button" class="kgr__sc" popovertarget="kgr-scale" popovertargetaction="hide">Sluiten</button>
      </div>
      <details class="kgr__more"><summary>Alle kenmerken</summary>
        <dl class="kgr__all">
          <div><dt>Soort woning</dt><dd>Eengezinswoning, hoekwoning</dd></div><div><dt>Bouwstijl</dt><dd>Jaren dertig, erker</dd></div>
          <div><dt>Dak</dt><dd>Zadeldak, pannen 2011</dd></div><div><dt>Isolatie</dt><dd>Dak, vloer, deels dubbel glas</dd></div>
          <div><dt>Badkamer</dt><dd>Inloopdouche, 2e toilet</dd></div><div><dt>Zolder</dt><dd>Vaste trap, 2 kamers</dd></div>
          <div><dt>Eigendom</dt><dd>Volle eigendom</dd></div><div><dt>VvE</dt><dd>Niet van toepassing</dd></div>
          <div><dt>Aanvaarding</dt><dd>In overleg, vanaf jan 2027</dd></div><div><dt>Schuur</dt><dd>Stenen berging 8 m²</dd></div>
        </dl>
      </details>
      <div class="kgr__acts"><a class="kgr__btn" href="#">Plan een bezichtiging</a><a class="kgr__ghost" href="#">Download brochure (PDF, 4,2 MB)</a></div>
    </div>
  </div>
</div>
</div>

/* Kerngegevens-raster woning · NedDev · eigen werk. */
/* fonts (Fontshare): sentient@400,500 + general-sans@400,500,600 */
.kgr{--ink:#1b1f22;--mut:#5f6669;--bg:#fbfaf7;--line:#e2ded5;--acc:#2f4f3a;background:var(--bg);color:var(--ink);font-family:'General Sans','Switzer',sans-serif;box-sizing:border-box}
.kgr *,.kgr *::before{box-sizing:border-box}
.kgr [hidden]{display:none!important}
.kgr__in{max-width:1200px;margin:0 auto;padding:36px 32px 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.kgr__photo{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:4/3.4;background:#d9d4ca}
.kgr__img{width:100%;height:100%;object-fit:cover;object-position:68% 50%;display:block}
.kgr__status{position:absolute;left:14px;top:14px;font:500 11px 'JetBrains Mono',monospace;letter-spacing:.06em;background:#fff;color:var(--acc);padding:6px 9px;border-radius:3px}
.kgr__crumb{margin:0 0 10px;font:500 11px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.kgr__h{margin:0;font-family:'Sentient',Georgia,serif;font-weight:500;font-size:clamp(30px,3.6vw,44px);line-height:1.02}
.kgr__place{margin:6px 0 10px;font-size:14.5px;color:var(--mut)}
.kgr__price{margin:0 0 20px;font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
.kgr__price span{font-size:13px;font-weight:400;color:var(--mut)}
.kgr__grid{margin:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--line)}
.kgr__grid>div{padding:12px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0}
.kgr__grid dt{font:500 10.5px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:5px}
.kgr__grid dd{margin:0;font-family:'Sentient',Georgia,serif;font-size:21px;line-height:1.15;font-variant-numeric:tabular-nums}
.kgr__grid dd small{display:block;font-family:'General Sans',sans-serif;font-size:12px;color:var(--mut);margin-top:2px}
.kgr__label{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none;cursor:pointer;color:var(--ink);font:500 12.5px 'General Sans',sans-serif}
.kgr__chip{display:inline-grid;place-items:center;width:40px;height:26px;background:#c8d200;color:#1b1f22;font:600 16px 'General Sans',sans-serif;clip-path:polygon(0 0,78% 0,100% 50%,78% 100%,0 100%)}
.kgr__lbl-t{text-decoration:underline;text-underline-offset:3px;color:var(--mut)}
.kgr__label:hover .kgr__lbl-t{color:var(--ink)}
.kgr__label:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.kgr__scale{inset:auto;position:absolute;margin:0;width:300px;max-width:calc(100vw - 16px);padding:16px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);box-shadow:0 16px 36px -14px rgba(0,0,0,.35);font-family:'General Sans',sans-serif}
.kgr__scale:not([popover]),.kgr__scale.is-fallback{z-index:5}
.kgr__body{position:relative}
.kgr__scale{left:0;top:200px}
.kgr__st{margin:0 0 10px;font-weight:600;font-size:14px}
.kgr__bars{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:3px}
.kgr__bars li{width:var(--w);background:var(--c);color:#111;font:600 12px/20px 'General Sans',sans-serif;padding-left:8px;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%)}
.kgr__bars li:nth-child(n+6){color:#fff}
.kgr__bars li.is-on{outline:2px solid var(--ink);outline-offset:2px}
.kgr__sn{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:var(--mut)}
.kgr__sc{font:600 13px 'General Sans',sans-serif;padding:7px 12px;border:1px solid var(--line);border-radius:3px;background:#fff;cursor:pointer}
.kgr__sc:hover{border-color:var(--ink)}
.kgr__sc:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.kgr__more{margin-top:14px;border-bottom:1px solid var(--line)}
.kgr__more summary{cursor:pointer;padding:10px 0;font-weight:600;font-size:14.5px;color:var(--acc);list-style:none;display:flex;align-items:center;gap:8px}
.kgr__more summary::-webkit-details-marker{display:none}
.kgr__more summary::before{content:'+';display:inline-grid;place-items:center;width:20px;height:20px;border:1.5px solid currentColor;border-radius:50%;font-size:14px;line-height:1}
.kgr__more[open] summary::before{content:'-'}
.kgr__more summary:hover{text-decoration:underline;text-underline-offset:3px}
.kgr__more summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.kgr__all{margin:0 0 12px;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.kgr__all div{display:grid;grid-template-columns:110px 1fr;gap:8px;padding:6px 0;border-top:1px solid var(--line);font-size:13.5px}
.kgr__all dt{color:var(--mut)}.kgr__all dd{margin:0}
.kgr__acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:20px}
.kgr__btn{display:inline-flex;padding:13px 20px;border-radius:3px;background:var(--acc);color:#fff;font-weight:600;font-size:15px;text-decoration:none;transition:background-color .15s ease}
.kgr__btn:hover{background:#223a2b}
.kgr__btn:active{transform:translateY(1px)}
.kgr__ghost{color:var(--ink);font-size:14px;font-weight:500}
.kgr__ghost:hover{color:var(--acc)}
.kgr__btn:focus-visible,.kgr__ghost:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
@media (max-width:860px){
  .kgr__in{grid-template-columns:1fr;padding:20px 14px 28px;gap:20px}
  .kgr__photo{aspect-ratio:4/3}
  .kgr__grid{grid-template-columns:1fr 1fr}
  .kgr__grid dd{font-size:19px}
  .kgr__all{grid-template-columns:1fr}
  .kgr__scale{width:min(300px,calc(100% - 4px));top:300px}
}
@media (prefers-reduced-motion:reduce){.kgr *{transition:none!important}}

// Kerngegevens-raster woning · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
const w=root.querySelector('.kgr'); if(!w) return;
const pop=w.querySelector('.kgr__scale'), btn=w.querySelector('.kgr__label'), body=w.querySelector('.kgr__body');
const native=typeof HTMLElement!=='undefined'&&HTMLElement.prototype.hasOwnProperty('popover');
const place=()=>{const b=btn.getBoundingClientRect(), r=body.getBoundingClientRect(); pop.style.top=(b.bottom-r.top+8)+'px'; pop.style.left=Math.max(0,Math.min(b.left-r.left,r.width-pop.offsetWidth))+'px';};
if(native){
  const fix=()=>{const b=btn.getBoundingClientRect(); pop.style.position='fixed'; pop.style.top=Math.round(b.bottom+8)+'px'; pop.style.left=Math.round(Math.max(8,Math.min(b.left,innerWidth-pop.offsetWidth-8)))+'px';};
  const onScroll=()=>{try{pop.hidePopover();}catch(e){}};
  pop.addEventListener('toggle',e=>{const on=e.newState==='open'; btn.setAttribute('aria-expanded',on?'true':'false');
    if(on){fix(); addEventListener('scroll',onScroll,{capture:true,passive:true});} else removeEventListener('scroll',onScroll,{capture:true});});
}else{
  pop.removeAttribute('popover'); pop.hidden=true; pop.classList.add('is-fallback');
  const set=on=>{pop.hidden=!on; btn.setAttribute('aria-expanded',on?'true':'false'); if(on) place();};
  btn.addEventListener('click',()=>set(pop.hidden));
  pop.querySelector('.kgr__sc').addEventListener('click',()=>{set(false); btn.focus();});
  w.addEventListener('keydown',e=>{if(e.key==='Escape'&&!pop.hidden){set(false); btn.focus();}});
}
w.querySelectorAll('a[href="#"]').forEach(a=>a.addEventListener('click',e=>e.preventDefault()));
}
init(document.querySelector('.jouw-container'));

Meer uit paginasecties

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →