Lorem ipsum dolor sit amet
Desktop
Laptop
Tablet landscape
Tablet portrait
Smartphone landscape
Smartphone portrait
Desktop
Laptop
Tablet landscape
Tablet portrait
Smartphone landscape
Smartphone portrait
De primaire knoppen worden gebruikt voor opvallende acties, zoals een call to action, en zijn beschikbaar in twee varianten voor optimaal contrast op verschillende achtergronden.
Secundaire knoppen worden gebruikt voor minder prominente acties of links, zoals aanvullende navigatie of ondersteunende content op de website.
Menu knoppen (hoofdmenu) blijven in elke header zwart. Bij een hover actie wordt de balk eronder in contrasterende kleur getoond. Zie hiervoor de sectie 'Achtergrondkleur en tekstkleur' onder Kleur.
Technisch (secundaire knoppen)
Bij een hover-actie verschuift de 'pijl' 15px naar rechts en verschijnt een lijn van links naar rechts onder de tekstlink. De lijn wordt getoond -3px van beneden t.o.v. de tekst.
Zwarte knop
Te gebruiken op achtergronden met een effen kleur of afbeelding.
Zwarte knop
Te gebruiken op achtergronden met een effen kleur of afbeelding.
Zwarte knop
Te gebruiken op achtergronden met een effen kleur of afbeelding.
Witte knop
Te gebruiken op achtergronden met een effen kleur of afbeelding.
Witte knop
Te gebruiken op achtergronden met een effen kleur of afbeelding.
Witte knop
Te gebruiken op achtergronden met een effen kleur of afbeelding.
Secundaire knop
Te gebruiken op achtergronden met een effen kleur.
Secundaire knop
Te gebruiken op achtergronden met een effen kleur.
Secundaire knop
Te gebruiken op achtergronden met een effen kleur.
Secundaire knop
Te gebruiken op achtergronden met een effen kleur.
Secundaire knop
Te gebruiken op achtergronden met een effen kleur.
Secundaire knop
Te gebruiken op achtergronden met een effen kleur.
Secundaire knop
Te gebruiken op achtergronden met een effen kleur.
Secundaire knop
Te gebruiken op achtergronden met een effen kleur.
Secundaire knop
Te gebruiken op achtergronden met een effen kleur.
Zwarte knop
Te gebruiken op alle header achtergronden.
Zwarte knop
Te gebruiken op alle header achtergronden.
Zwarte knop
Te gebruiken op alle header achtergronden.
Witte knop
Te gebruiken op header achtergronden.
Zwarte knop
Te gebruiken op alle header achtergronden.
Zwarte knop
Te gebruiken op alle header achtergronden.
Een tag heeft een rechte rand van 1 pixel. Op een witte achtergrond zijn de tekst en de rand zwart. Op een gekleurde achtergrond hebben de rand en tekst de kleur volgens de kleurtabel.
Technisch
De rand is 2px breed en bij een hover-actie veranderen achtergrond- en tekstkleur in de gecomplementeerde kleur.
Tag
De tag heeft een zwarte rand en tekst op een witte achtergrond.
Tags
De tag heeft een gele rand en tekst, te gebruiken op een effen paarse achtergrond.
Tags
De tag heeft een gele rand en tekst, te gebruiken op een effen roze achtergrond.
Tags
De tag heeft een gele rand en tekst, te gebruiken op een effen oranje achtergrond.
Tags
De tag heeft een lichtblauwe rand en tekst, te gebruiken op een effen blauwe achtergrond.
Tags
De tag heeft een blauwe rand en tekst, te gebruiken op een effen lichtblauwe achtergrond.
Tags
De tag heeft een roze rand en tekst, te gebruiken op een effen gele achtergrond.
Een item van de toepsssingenbox heeft een rechte rand van 1 pixel en een pijltje voor de tekst. Op een witte achtergrond zijn de tekst en de rand zwart. Op een gekleurde achtergrond hebben de rand en tekst de kleur volgens de kleurtabel.
Technisch
De rand is 2px breed en het icoon (pijl) is geplaatst achter de tekst. Bij een hover-actie verschuift te pijl 15px naar rechts binnen het kader. De box verandert dus niet qua grootte.
Item
Het item van de toepassingenbox heeft een zwarte rand en tekst op een witte achtergrond.
Item
Het item van de toepassingenbox heeft een gele rand en tekst, te gebruiken op een effen paarse achtergrond.
Item
Het item van de toepassingenbox heeft een gele rand en tekst, te gebruiken op een effen roze achtergrond.
Item
Het item van de toepassingenbox heeft een gele rand en tekst, te gebruiken op een effen oranje achtergrond.
Item
Het item van de toepassingenbox heeft een lichtblauwe rand en tekst, te gebruiken op een effen blauwe achtergrond.
Item
Het item van de toepassingenbox heeft een blauwe rand en tekst, te gebruiken op een effen lichtblauwe achtergrond.
Item
Het item van de toepassingenbox heeft een roze rand en tekst, te gebruiken op een effen gele achtergrond.
Een project- of blogtegel bestaat uit een afbeelding, titel en korte introtekst. De afbeelding en titel zijn klikbaar. Blogtegels tonen ook een datum en de introtekst mag maximaal 170 tekens zijn.
Het marquee-effect is een geanimeerde tekstregel die continu door het scherm beweegt. Deze animatie trekt de aandacht en wordt gebruikt op plekken in de website waar we iets extra willen benadrukken.
De header wisselt van achtergrondkleur. De tekst in het header gedeelte heeft de bijbehorende kleur volgens de kleurtabel.
De achtergrondkleur van de footer is altijd geel. De tekstkleur in de footer is roze. Het logo wisselt niet en is gelijk aan complementerende kleur van de gele achtergrond (roze).
Ga meteen naar
Neem contact op
Bezoek ons
Ga meteen naar
Neem contact op
Bezoek ons
Op de website worden H1 en H2 koppen gebruikt om hiërarchie en structuur aan te brengen. H1 is gereserveerd voor de belangrijkste titels, terwijl H2 voor subtitels en secties wordt gebruikt. De overige koppen (H3, H4, H5, H6) bieden meer niveaus voor subsecties en detailinformatie, waarbij de grootte en het gewicht afnemen naarmate het nummer oploopt.
Wordt één keer per pagina gebruikt als hoofdtitel en geeft het hoofdonderwerp weer.
Geeft belangrijke secties of onderdelen binnen de pagina weer
Wordt gebruikt voor subsecties binnen een H3-blok
Geeft detailinformatie of subtitels binnen een H4-sectie aan
Geeft detailinformatie of subtitels binnen een H5-sectie aan
Geeft detailinformatie of subtitels binnen een H6-sectie aan
Om ons logo te laten opvallen, moet het altijd goed contrasteren met de achtergrond. Deze voorbeelden laten zien welke richtlijnen gelden voor het gebruik.
