NedDev®
EN Get in touch
Home Werk
Diensten
SaaS bouwenAI developmentAPI developmentMobile app developmentGoogle Ads managementHeadless ShopifyLaravel developmentNext.js developmentReact developmentTypeScript engineeringUI/UX designSEO & AEOWebshop bouwen
Oplossingen
AI-oplossingenB2B-platformsE-commerceHorecaLead generationLogistiekOnderwijsProcesautomatiseringSaaS-platformsStartup MVPVastgoedZorg
Branches
JuridischZorgVastgoedFinanceHoreca
Regio
Den HaagRotterdamAmsterdamUtrechtEindhovenAlmereBredaArnhemNijmegenTilburgEnschedeGroningenLeidenDelftZoetermeerDen Bosch
Studio
OverWerkwijzeLabBlogContact

Reviews NL-stijl: score boven de kop, badges en cijferkaarten Nieuw

Complete reviewset zoals Nederlandse klanten die kennen: score als eyebrow boven de H1, badges per platform naast elkaar (Google, Werkspot, Trustoo met cijfer en aantal) en kaarten met rapportcijfer 1-10, datum, dienst en plaats. Filteren per platform, kritische reviews met reactie van de eigenaar, sorteren en meer laden. Staten: laden, alles getoond en leeg (met herstelknop). Lange teksten klappen uit met een knop met aria-expanded. In productie vul je de data uit de Google Places API en de platformfeeds.

9,2gemiddeld uit 214 beoordelingen op drie platforms

Tuinaanleg en tuinonderhoud in Apeldoorn en op de Veluwe

Hoveniersbedrijf Van Dam legt sinds 2004 tuinen aan in Apeldoorn, Ugchelen, Beekbergen en Twello. Dit zeggen klanten, ook als het minder ging.

    Zo gebruik je het

    1. Plak de HTML op de plek waar het onderdeel moet komen.
    2. Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
    3. Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.
    <!-- Reviews NL-stijl: score boven de kop, badges en cijferkaarten · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="hvd">
  <div class="hvd__in">
    <div class="hvd__top">
      <div>
        <p class="hvd__eyebrow"><span class="hvd__cijfer">9,2</span>gemiddeld uit 214 beoordelingen op drie platforms</p>
        <h2 class="hvd__h">Tuinaanleg en tuinonderhoud in Apeldoorn en op de Veluwe</h2>
        <p class="hvd__lead">Hoveniersbedrijf Van Dam legt sinds 2004 tuinen aan in Apeldoorn, Ugchelen, Beekbergen en Twello. Dit zeggen klanten, ook als het minder ging.</p>
      </div>
      <ul class="hvd__badges">
        <li><a class="hvd__badge" href="#"><span class="hvd__pm" aria-hidden="true">G</span><span><b>4,8</b> van 5</span><small>165 reviews op Google</small></a></li>
        <li><a class="hvd__badge" href="#"><span class="hvd__pm hvd__pm--w" aria-hidden="true">W</span><span><b>9,3</b> van 10</span><small>38 reviews op Werkspot</small></a></li>
        <li><a class="hvd__badge" href="#"><span class="hvd__pm hvd__pm--t" aria-hidden="true">T</span><span><b>9,1</b> van 10</span><small>11 reviews op Trustoo</small></a></li>
      </ul>
    </div>
    <div class="hvd__tools">
      <div class="hvd__filt" role="radiogroup" aria-label="Filter op platform">
        <label><input type="radio" name="hvd-p" value="alle" checked><span>Alle</span></label>
        <label><input type="radio" name="hvd-p" value="Google"><span>Google</span></label>
        <label><input type="radio" name="hvd-p" value="Werkspot"><span>Werkspot</span></label>
        <label><input type="radio" name="hvd-p" value="Trustoo"><span>Trustoo</span></label>
      </div>
      <label class="hvd__crit"><input type="checkbox"><span>Alleen cijfers lager dan 8</span></label>
      <label class="hvd__sort"><span>Sorteer</span><select><option value="new">Nieuwste eerst</option><option value="hi">Hoogste cijfer</option><option value="lo">Laagste cijfer</option></select></label>
    </div>
    <p class="hvd__count" aria-live="polite"></p>
    <ul class="hvd__grid"></ul>
    <div class="hvd__more-w"><button class="hvd__more" type="button">Meer reviews laden</button></div>
  </div>
</div>
</div>

    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 →