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

Hero met boekbalk als onderrand New

Photo hero for an event venue or hotel with a booking bar over its bottom edge: date range, guests and event type. Shows loading, error (end before start), empty (too many guests) and results with available rooms. Native date inputs, no datepicker library; in production wire the search to your booking system.

Ketelhuis van Remise Oost, gedekt voor een diner met lange tafels

Remise Oost · Zaandam · 3 zalen tot 650 gasten

Een zaal aan de Zaan voor uw jubileum, congres of personeelsfeest.

Voormalige tramremise uit 1911, 12 minuten van Amsterdam Centraal. Eigen keuken, gratis parkeren voor 140 auto’s.

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.
<!-- Hero met boekbalk als onderrand · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="bbh">
  <div class="bbh__hero">
    <img class="bbh__img" src="https://neddev.com/lab-media/boekbalk-hero-rand-1.webp" alt="Ketelhuis van Remise Oost, gedekt voor een diner met lange tafels" loading="lazy">
    <div class="bbh__copy">
      <p class="bbh__eyebrow">Remise Oost · Zaandam · 3 zalen tot 650 gasten</p>
      <h2 class="bbh__h">Een zaal aan de Zaan voor uw jubileum, congres of personeelsfeest.</h2>
      <p class="bbh__lead">Voormalige tramremise uit 1911, 12 minuten van Amsterdam Centraal. Eigen keuken, gratis parkeren voor 140 auto’s.</p>
    </div>
  </div>
  <form class="bbh__bar" novalidate aria-label="Beschikbaarheid zoeken">
    <div class="bbh__f bbh__f--date"><label for="bbh-van">Van</label><input id="bbh-van" class="bbh__in" type="date" value="2026-11-13" min="2026-10-07" required></div>
    <div class="bbh__f bbh__f--date"><label for="bbh-tot">Tot en met</label><input id="bbh-tot" class="bbh__in" type="date" value="2026-11-13" min="2026-10-07" required aria-describedby="bbh-err"></div>
    <div class="bbh__f"><label for="bbh-n">Gasten</label>
      <div class="bbh__step"><button type="button" class="bbh__sb" data-d="-10" aria-label="10 gasten minder">-</button><input id="bbh-n" class="bbh__in bbh__num" type="number" inputmode="numeric" min="10" max="2000" step="10" value="120"><button type="button" class="bbh__sb" data-d="10" aria-label="10 gasten meer">+</button></div>
    </div>
    <div class="bbh__f"><label for="bbh-soort">Soort</label>
      <select id="bbh-soort" class="bbh__in"><option>Diner</option><option>Congres</option><option>Feest</option><option>Vergadering</option></select>
    </div>
    <button type="submit" class="bbh__go"><span class="bbh__spin" aria-hidden="true"></span><span class="bbh__go-lbl">Bekijk vrije zalen</span></button>
    <p class="bbh__err" id="bbh-err" role="alert"></p>
  </form>
  <div class="bbh__out" aria-live="polite">
    <p class="bbh__range"></p>
    <div class="bbh__res"></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 →