NedDev®
NL Get in touch
Home Work
Services
SaaS developmentAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOEcommerce development
Solutions
AI solutionsB2B platformsE-commerceHospitalityLead generationLogisticsEducationProcess automationSaaS platformsStartup MVPReal estateHealthcare
Industries
LegalHealthcareReal estateFinanceHospitality
Regions
The HagueRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
AboutProcessLabBlogContact

Kerngegevens-raster woning New

Fact block with label above value (year built, m², energy label, rooms) next to the house photo, with an energy label scale in a popover (Popover API, with JS fallback toggling hidden) and all features in a disclosure. Also works for installers or hotel rooms.

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

  1. A
  2. B
  3. C
  4. D
  5. E
  6. F
  7. G

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 bezichtigingDownload brochure (PDF, 4,2 MB)

How to use it

  1. Paste the HTML where the page sections should appear.
  2. Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
  3. Add the JavaScript and call init() with the element that contains the HTML.
<!-- 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>

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 →