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

Zorg Helder

Toegankelijk zorgthema: alle tekst haalt WCAG AAA (contrast 7:1 of hoger), basisletter 18 px, grote klikvlakken, zichtbare focusring en meldingen die nooit alleen op kleur leunen. Vriendelijk, rustig en duidelijk voor huisartsen, apotheken en thuiszorg.

Bekijk op volledig scherm ↗
Spoed buiten kantoortijd: 0900 123 4567 Thema 12 · Zorg Helder · WCAG 2.2 AAA voor tekst

Gezondheidscentrum De LindeHuisartsen · Apotheek · Fysiotherapie · Zwolle-Zuid

Waar kunnen we u mee helpen?

Duidelijk, vriendelijk en voor iedereen te lezen. Grote letters, rustige kleuren en knoppen die u niet hoeft te zoeken.

Openingstijden
Maandag tot donderdag08:00 tot 17:00
Vrijdag08:00 tot 16:30
WeekendHuisartsenpost Isala, 0900 333 1122

Griepprik 2026

Zaterdag 18 oktober, 09:00 tot 13:00 uur in sporthal De Pas. U krijgt een uitnodiging per post. Neem die en uw identiteitsbewijs mee.

Geplaatst 2 oktober 2026

Kleur en contrast

Achtergrond#FFFFFF
Oppervlak#EEF4F6
Tekst#0E1E2E16,9 : 1 AAA
Gedempt#3A4A5A9,1 : 1 AAA
Lijn#6A77854,6 : 1 vlak
Accent · zeegroen#00585E8,2 : 1 AAA
Accent 2 · focus#FFD45C11,9 : 1 met tekst
Signaal · spoed#A3141E7,8 : 1 AAA

Letter

Chillax 600

Plus Jakarta Sans, 18 px, regelafstand 1,6. Lopende tekst nooit kleiner dan 16 px.

40 · 28 · 22 · 18 · 16

Labels

Klaar Wachtlijst Vervallen

Formulier en knoppen

Past bij huisartsen en gezondheidscentra · apotheken · thuiszorg en wijkteams · gemeenten · patiëntenverenigingen

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. Geen JavaScript nodig.
<!-- Zorg Helder · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tzh"><div class="tzh__in">
  <div class="tzh__bar">
    <span class="tzh__bar-l"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2"/></svg>Spoed buiten kantoortijd: <b>0900 123 4567</b></span>
    <span class="tzh__bar-r">Thema 12 · Zorg Helder · WCAG 2.2 AAA voor tekst</span>
  </div>
  <div class="tzh__grid">
    <div class="tzh__site">
      <p class="tzh__org"><span class="tzh__logo" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 21c-5-3-8-6.5-8-10.5A4.5 4.5 0 0 1 12 8a4.5 4.5 0 0 1 8 2.5c0 4-3 7.5-8 10.5z"/></svg></span>Gezondheidscentrum De Linde<small>Huisartsen · Apotheek · Fysiotherapie · Zwolle-Zuid</small></p>
      <h3 class="tzh__name">Waar kunnen we u mee helpen?</h3>
      <p class="tzh__mood">Duidelijk, vriendelijk en voor iedereen te lezen. Grote letters, rustige kleuren en knoppen die u niet hoeft te zoeken.</p>
      <div class="tzh__tasks">
        <button class="tzh__task" type="button"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="5" width="17" height="15" rx="2"/><path d="M3.5 10h17M8 3v4M16 3v4M8 14h3"/></svg><span><b>Afspraak maken</b><small>Online of bel 038 123 4500</small></span></button>
        <button class="tzh__task" type="button"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="3.5" width="14" height="17" rx="2"/><path d="M9 8h6M9 12h6M9 16h3"/></svg><span><b>Herhaalrecept</b><small>Voor 11:00 aangevraagd, morgen klaar</small></span></button>
        <button class="tzh__task tzh__task--sos" type="button"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l9.5 17h-19z"/><path d="M12 10v4M12 17.2v.1"/></svg><span><b>Spoed</b><small>Bel direct 038 123 4599</small></span></button>
      </div>
      <table class="tzh__hours">
        <caption>Openingstijden</caption>
        <tr><th scope="row">Maandag tot donderdag</th><td>08:00 tot 17:00</td></tr>
        <tr><th scope="row">Vrijdag</th><td>08:00 tot 16:30</td></tr>
        <tr><th scope="row">Weekend</th><td>Huisartsenpost Isala, 0900 333 1122</td></tr>
      </table>
      <div class="tzh__news">
        <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 11v6M12 7.5v.1"/></svg>
        <div><p class="tzh__news-t">Griepprik 2026</p><p class="tzh__news-b">Zaterdag 18 oktober, 09:00 tot 13:00 uur in sporthal De Pas. U krijgt een uitnodiging per post. Neem die en uw identiteitsbewijs mee.</p><p class="tzh__news-d">Geplaatst 2 oktober 2026</p></div>
      </div>
    </div>
    <div class="tzh__sys">
      <p class="tzh__lbl">Kleur en contrast</p>
      <table class="tzh__pal">
        <tr><td><i style="--c:#FFFFFF"></i></td><th scope="row">Achtergrond</th><td>#FFFFFF</td><td></td></tr>
        <tr><td><i style="--c:#EEF4F6"></i></td><th scope="row">Oppervlak</th><td>#EEF4F6</td><td></td></tr>
        <tr><td><i style="--c:#0E1E2E"></i></td><th scope="row">Tekst</th><td>#0E1E2E</td><td><span class="tzh__ratio">16,9 : 1 AAA</span></td></tr>
        <tr><td><i style="--c:#3A4A5A"></i></td><th scope="row">Gedempt</th><td>#3A4A5A</td><td><span class="tzh__ratio">9,1 : 1 AAA</span></td></tr>
        <tr><td><i style="--c:#6A7785"></i></td><th scope="row">Lijn</th><td>#6A7785</td><td><span class="tzh__ratio tzh__ratio--ui">4,6 : 1 vlak</span></td></tr>
        <tr><td><i style="--c:#00585E"></i></td><th scope="row">Accent · zeegroen</th><td>#00585E</td><td><span class="tzh__ratio">8,2 : 1 AAA</span></td></tr>
        <tr><td><i style="--c:#FFD45C"></i></td><th scope="row">Accent 2 · focus</th><td>#FFD45C</td><td><span class="tzh__ratio">11,9 : 1 met tekst</span></td></tr>
        <tr><td><i style="--c:#A3141E"></i></td><th scope="row">Signaal · spoed</th><td>#A3141E</td><td><span class="tzh__ratio">7,8 : 1 AAA</span></td></tr>
      </table>
      <div class="tzh__two">
        <div>
          <p class="tzh__lbl">Letter</p>
          <p class="tzh__t1">Chillax 600</p>
          <p class="tzh__t2">Plus Jakarta Sans, 18 px, regelafstand 1,6. Lopende tekst nooit kleiner dan 16 px.</p>
          <p class="tzh__t3">40 · 28 · 22 · 18 · 16</p>
        </div>
        <div>
          <p class="tzh__lbl">Labels</p>
          <div class="tzh__badges">
            <span class="tzh__bdg tzh__bdg--ok"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>Klaar</span>
            <span class="tzh__bdg tzh__bdg--warn"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg>Wachtlijst</span>
            <span class="tzh__bdg tzh__bdg--err"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg>Vervallen</span>
          </div>
        </div>
      </div>
      <p class="tzh__lbl">Formulier en knoppen</p>
      <div class="tzh__form">
        <label class="tzh__field"><span>Geboortedatum</span><input class="tzh__input" type="text" value="12-03-1951"></label>
        <label class="tzh__field"><span>Uw huisarts</span><select class="tzh__sel"><option>Dokter A. el Amrani</option><option>Dokter M. de Groot</option></select></label>
        <label class="tzh__field tzh__field--err"><span>BSN</span><input class="tzh__input" type="text" value="12345" aria-invalid="true"><em><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5v5M12 15.8v.1"/></svg>Een BSN heeft 9 cijfers.</em></label>
      </div>
      <div class="tzh__btns">
        <button class="tzh__btn tzh__btn--p" type="button">Afspraak bevestigen</button>
        <button class="tzh__btn tzh__btn--s" type="button">Wijzigen</button>
        <button class="tzh__btn tzh__btn--g" type="button">Terug</button>
        <button class="tzh__btn tzh__btn--p is-focus" type="button">Focus</button>
      </div>
    </div>
  </div>
  <p class="tzh__fit"><b>Past bij</b> huisartsen en gezondheidscentra · apotheken · thuiszorg en wijkteams · gemeenten · patiëntenverenigingen</p>
</div></div>
</div>

Meer uit thema's

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 →