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

Topbalk met reviewscore en header met infoblokken New

Header for a practice or shop: slim top bar with review score and count, service area and emergency number, then a header with three info blocks (call, address, opening hours). Hours compute live whether you are open and expand to a weekly table (aria-expanded button, Esc closes). Plain HTML/CSS plus a small JS clock; without JS the fixed hours remain.

4,9uit 386 Google-reviews

Voor Maarssen, Breukelen, Oud-Zuilen en Utrecht-Noord

Spoed 24/7 0346 55 12 80
Afspraak maken

Oktober is gebitsmaand · gratis gebitscheck bij elke vaccinatie

Dierenarts in Maarssen, ook buiten kantoortijd bereikbaar

Vier dierenartsen en zes paraveterinairen voor honden, katten, konijnen en kleine huisdieren. Eigen operatiekamer, röntgen en echo in huis.

Dierenarts onderzoekt een beagle op de behandeltafel
Demo, zet de klok op

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.
<!-- Topbalk met reviewscore en header met infoblokken · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="dkv">
  <div class="dkv__top">
    <div class="dkv__top-in">
      <a class="dkv__score" href="#" aria-label="Beoordeeld met 4,9 van 5 uit 386 Google-reviews">
        <span class="dkv__stars" aria-hidden="true"><svg viewBox="0 0 100 20"><defs><clipPath id="dkv-clip"><rect width="98" height="20"/></clipPath></defs><g class="dkv__st-bg"><path id="dkv-s" d="M10 1.5l2.6 5.4 5.9.8-4.3 4.1 1 5.8L10 14.8l-5.2 2.8 1-5.8L1.5 7.7l5.9-.8z"/><use href="#dkv-s" x="20"/><use href="#dkv-s" x="40"/><use href="#dkv-s" x="60"/><use href="#dkv-s" x="80"/></g><g class="dkv__st-fg" clip-path="url(#dkv-clip)"><use href="#dkv-s"/><use href="#dkv-s" x="20"/><use href="#dkv-s" x="40"/><use href="#dkv-s" x="60"/><use href="#dkv-s" x="80"/></g></svg></span>
        <b>4,9</b><span class="dkv__score-n">uit 386 Google-reviews</span>
      </a>
      <p class="dkv__area"><svg class="dkv__i" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 18s-5.5-5.2-5.5-9.3a5.5 5.5 0 0 1 11 0C15.5 12.8 10 18 10 18z"/><circle cx="10" cy="8.6" r="2"/></svg>Voor Maarssen, Breukelen, Oud-Zuilen en Utrecht-Noord</p>
      <a class="dkv__spoed" href="tel:+31346551280"><span class="dkv__pulse" aria-hidden="true"></span>Spoed 24/7 <b>0346 55 12 80</b></a>
    </div>
  </div>
  <div class="dkv__head">
    <div class="dkv__head-in">
      <a class="dkv__logo" href="#" aria-label="Dierenkliniek De Vecht, naar de homepage">
        <svg viewBox="0 0 40 40" aria-hidden="true"><rect width="40" height="40" rx="9" fill="#0f4c47"/><path d="M9 13c4 0 6 3 7.5 7s3.5 9 3.5 9 2-5 3.5-9 3.5-7 7.5-7" fill="none" stroke="#f3ece1" stroke-width="2.6" stroke-linecap="round"/><path d="M8 29c6-2.2 18-2.2 24 0" fill="none" stroke="#d9643a" stroke-width="2.6" stroke-linecap="round"/></svg>
        <span><small>Dierenkliniek</small>De Vecht</span>
      </a>
      <ul class="dkv__info">
        <li><a class="dkv__blk" href="tel:+31346551200"><svg class="dkv__i" viewBox="0 0 20 20" aria-hidden="true"><path d="M5.2 2.8h2.6l1.3 3.6-1.8 1.2a9 9 0 0 0 5.1 5.1l1.2-1.8 3.6 1.3v2.6a1.6 1.6 0 0 1-1.7 1.6C9 15.9 4.1 11 3.6 4.5a1.6 1.6 0 0 1 1.6-1.7z"/></svg><span><small>Bel ons</small><b>0346 55 12 00</b></span></a></li>
        <li><a class="dkv__blk" href="#"><svg class="dkv__i" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 18s-5.5-5.2-5.5-9.3a5.5 5.5 0 0 1 11 0C15.5 12.8 10 18 10 18z"/><circle cx="10" cy="8.6" r="2"/></svg><span><small>Adres · plan je route</small><b>Bisonspoor 1120, Maarssen</b></span></a></li>
        <li class="dkv__hrs">
          <button class="dkv__blk dkv__blk--btn" type="button" aria-expanded="false" aria-controls="dkv-week"><svg class="dkv__i" viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="7.5"/><path d="M10 5.6V10l2.8 1.8"/></svg><span><small class="dkv__now"><i class="dkv__dot"></i><em>Openingstijden</em></small><b class="dkv__when">ma tot vr 08:00 tot 18:00</b></span><svg class="dkv__chev" viewBox="0 0 20 20" aria-hidden="true"><path d="M6 8l4 4 4-4"/></svg></button>
          <div id="dkv-week" class="dkv__week" hidden>
            <table><caption>Openingstijden balie en spreekuur</caption><tbody></tbody></table>
            <p>Buiten deze tijden: bel <a href="tel:+31346551280">0346 55 12 80</a>, er is altijd een dierenarts bereikbaar.</p>
          </div>
        </li>
      </ul>
      <a class="dkv__cta" href="#">Afspraak maken</a>
    </div>
  </div>
  <div class="dkv__nav"><ul class="dkv__nav-in"><li><a href="#" aria-current="page">Honden en katten</a></li><li><a href="#">Konijnen en knagers</a></li><li><a href="#">Vogels en reptielen</a></li><li><a href="#">Gebitszorg</a></li><li><a href="#">Tarieven</a></li><li><a href="#">Over de kliniek</a></li><li><a href="#">Contact</a></li></ul></div>
  <div class="dkv__hero">
    <div class="dkv__hero-in">
      <div>
        <p class="dkv__kick">Oktober is gebitsmaand · gratis gebitscheck bij elke vaccinatie</p>
        <h2 class="dkv__h">Dierenarts in Maarssen, ook buiten kantoortijd bereikbaar</h2>
        <p class="dkv__lead">Vier dierenartsen en zes paraveterinairen voor honden, katten, konijnen en kleine huisdieren. Eigen operatiekamer, röntgen en echo in huis.</p>
      </div>
      <img class="dkv__img" src="https://neddev.com/lab-media/topbalk-vertrouwen-1.webp" alt="Dierenarts onderzoekt een beagle op de behandeltafel" loading="lazy">
    </div>
  </div>
  <div class="dkv__demo"><span>Demo, zet de klok op</span><button type="button" data-dkv-t="nu" aria-pressed="true">nu</button><button type="button" data-dkv-t="2,17,35" aria-pressed="false">di 17:35</button><button type="button" data-dkv-t="6,13,0" aria-pressed="false">za 13:00</button><button type="button" data-dkv-t="0,10,0" aria-pressed="false">zo 10:00</button></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 →