Naar de inhoud
TODO: PageHeader

NL Design System gerenderd met Astro

componenten
title title small document title
Accordion Accordion · NL Design System
Action Group Action Group · NL Design System
Alert Alert · NL Design System
Alert Dialog Alert Dialog · NL Design System
Avatar Avatar · NL Design System
Blockquote Blockquote · NL Design System
Breadcrumb Navigation Breadcrumb Navigation · NL Design System
Button Button · NL Design System
Calendar Calendar · NL Design System
Card as Link Card as Link · NL Design System
Case Card Case Card · NL Design System
Checkbox Checkbox · NL Design System
Checkbox Group Checkbox Group · NL Design System
Code Code · NL Design System
Code Block Code Block · NL Design System
Color Sample Color Sample · NL Design System
Contact Timeline Contact Timeline · NL Design System
Data Badge Data Badge · NL Design System
Data Summary Data Summary · NL Design System
Date Input Date Input · NL Design System
Date Input Group Date Input Group · NL Design System
Date Picker Date Picker · NL Design System
Description List Description List · NL Design System
Dialog Dialog · NL Design System
Dot Badge Dot Badge · NL Design System
Drawer Drawer · NL Design System
Fieldset Fieldset · NL Design System
Figure Figure · NL Design System
File File · NL Design System
File Input File Input · NL Design System
Form Field Form Field · NL Design System
Form Field Description Form Field Description · NL Design System
Form Field Error Message Form Field Error Message · NL Design System
Form Field Label Form Field Label · NL Design System
Form Field Label Suffix Form Field Label Suffix · NL Design System
Form Field Status Form Field Status · NL Design System
Form Navigation Form Navigation · NL Design System
Form Summary Form Summary · NL Design System
Heading Heading · NL Design System
Heading 1 Heading 1 · NL Design System
Heading 2 Heading 2 · NL Design System
Heading 3 Heading 3 · NL Design System
Heading 4 Heading 4 · NL Design System
Heading 5 Heading 5 · NL Design System
Heading 6 Heading 6 · NL Design System
Heading Group Heading Group · NL Design System
Icon Icon · NL Design System
Image Image · NL Design System
Input Group Input Group · NL Design System
Language Navigation Language Navigation · NL Design System
Link Link · NL Design System
Link List Link List · NL Design System
Login Link Login Link · NL Design System
Logo Logo · NL Design System
Mark Mark · NL Design System
Modal Dialog Modal Dialog · NL Design System
Navigation Bar Navigation Bar · NL Design System
Note Note · NL Design System
Notification Banner Notification Banner · NL Design System
Number Badge Number Badge · NL Design System
Number Input Number Input · NL Design System
Ordered List Ordered List · NL Design System
Page Footer Page Footer · NL Design System
Page Header Page Header · NL Design System
Page Number Navigation Page Number Navigation · NL Design System
Paragraph Paragraph · NL Design System
Password Input Password Input · NL Design System
Progress Bar Progress Bar · NL Design System
Progress Circle Progress Circle · NL Design System
Progress List Progress List · NL Design System
Radio Button Radio Button · NL Design System
Radio Group Radio Group · NL Design System
Range Range · NL Design System
Rich Text Content Rich Text Content · NL Design System
Select Select · NL Design System
Select Combobox Select Combobox · NL Design System
Separator Separator · NL Design System
Side Navigation Side Navigation · NL Design System
Skip Link Skip Link · NL Design System
Spinner Spinner · NL Design System
Status Badge Status Badge · NL Design System
Strong Strong · NL Design System
Subscript Subscript · NL Design System
Superscript Superscript · NL Design System
Switch Switch · NL Design System
Table Table · NL Design System
Tabs Tabs · NL Design System
Task List Task List · NL Design System
Task Navigation Task Navigation · NL Design System
Text Area Text Area · NL Design System
Text Input Text Input · NL Design System
Toggletip Toggletip · NL Design System
Unordered List Unordered List · NL Design System
Video Video · NL Design System
YouTube Video YouTube Video · NL Design System
Componenten Overzicht Componenten Overzicht · NL Design System
baseline
title title small document title
Baseline december 2024 Baseline december 2024 · NL Design System
Baseline april 2025 Baseline april 2025 · NL Design System
Baseline mei 2025 Baseline mei 2025 · NL Design System
Baseline juni 2025 Baseline juni 2025 · NL Design System
Baseline juli 2025 Baseline juli 2025 · NL Design System
Baseline augustus 2025 Baseline augustus 2025 · NL Design System
Baseline september 2025 Baseline september 2025 · NL Design System
Baseline oktober 2025 Baseline oktober 2025 · NL Design System
Baseline november 2025 Baseline november 2025 · NL Design System
Baseline december 2025 Baseline december 2025 · NL Design System
Baseline februari 2026 Baseline februari 2026 · NL Design System
Baseline maart 2026 Baseline maart 2026 · NL Design System
Baseline Baseline · NL Design System
footer
title title small document title
Code of Conduct Code of Conduct · NL Design System
Code of Conduct Code of Conduct · NL Design System
Colofon Colofon · NL Design System
Privacy policy Privacy policy · NL Design System
Privacyverklaring Privacyverklaring · NL Design System
Toegankelijkheid Toegankelijkheid · NL Design System
Audit toegankelijkheid NLDesignSystem.nl versie 1.0 Audit toegankelijkheid NLDesignSystem.nl versie 1.0 · NL Design System
Audit toegankelijkheid NLDesignSystem.nl versie 2.0 Audit toegankelijkheid NLDesignSystem.nl versie 2.0 · NL Design System
community
title title small document title
Aanmelden als belangenorganisatie Aanmelden als belangenorganisatie · NL Design System
Bedankt voor je aanmelding Bedankt voor je aanmelding · NL Design System
Community Sprints Community Sprints · NL Design System
MijnServices Community MijnServices Community · NL Design System
Meld je aan voor de MijnServices Community Meld je aan voor de MijnServices Community · NL Design System
Bedankt voor je aanmelding Bedankt voor je aanmelding · NL Design System
Rijkshuisstijl Community Rijkshuisstijl Community · NL Design System
Meld je aan voor de Rijkshuisstijl Community Meld je aan voor de Rijkshuisstijl Community · NL Design System
Bedankt voor je aanmelding Bedankt voor je aanmelding · NL Design System
Bedankt voor je aanmelding Bedankt voor je aanmelding · NL Design System
Bedankt voor je aanmelding Bedankt voor je aanmelding · NL Design System
Bedankt voor je aanmelding Bedankt voor je aanmelding · NL Design System
Estafettemodeldag Estafettemodeldag · NL Design System
Introduction into European Design Systems 2025 Introduction into European Design Systems 2025 · NL Design System
Thanks for signing up! Thanks for signing up! · NL Design System
Bedankt voor je aanmelding Bedankt voor je aanmelding · NL Design System
Communitybijeenkomst 18 oktober 2024 Communitybijeenkomst 18 oktober 2024 · NL Design System
Design Open Dag Design Open Dag · NL Design System
Design Open Hour Design Open Hour · NL Design System
Aanmelden Aanmelden · NL Design System
Bedankt voor je aanmelding Bedankt voor je aanmelding · NL Design System
Design Systems Week Design Systems Week · NL Design System
Design Systems Week 2022 Design Systems Week 2022 · NL Design System
Videos Videos · NL Design System
Video's van Design Systems Week 2023 Video's van Design Systems Week 2023 · NL Design System
Videos Videos · NL Design System
Video's van Design Systems Week 2024 Video's van Design Systems Week 2024 · NL Design System
Videos Videos · NL Design System
Video's van Design Systems Week 2025 Video's van Design Systems Week 2025 · NL Design System
Tijdschema Tijdschema · NL Design System
Aanmelden voor Design Systems Week Aanmelden voor Design Systems Week · NL Design System
Bedankt voor je aanmelding Bedankt voor je aanmelding · NL Design System
Design Systems Week Design Systems Week · NL Design System
Propose talk for Design Systems Week Propose talk for Design Systems Week · NL Design System
Thanks for proposing a session Thanks for proposing a session · NL Design System
Sign up for Design Systems Week Sign up for Design Systems Week · NL Design System
Thanks for signing up! Thanks for signing up! · NL Design System
Sprekers gezocht voor Design Systems Week Sprekers gezocht voor Design Systems Week · NL Design System
Sessie voorstellen Sessie voorstellen · NL Design System
Developer Open Hour Developer Open Hour · NL Design System
Aanmelden voor de Developer Open Hour Aanmelden voor de Developer Open Hour · NL Design System
Bedankt voor je aanmelding Bedankt voor je aanmelding · NL Design System
Heartbeat van NL Design System Heartbeat van NL Design System · NL Design System
Aanmelden voor de Heartbeat Aanmelden voor de Heartbeat · NL Design System
Bedankt voor je aanmelding Bedankt voor je aanmelding · NL Design System
Video's van de Heartbeat Video's van de Heartbeat · NL Design System
Zelf iets vertellen Zelf iets vertellen · NL Design System
MijnServices Check-in MijnServices Check-in · NL Design System
Rijkshuisstijl Community Open Hour Rijkshuisstijl Community Open Hour · NL Design System
Expertteam Digitale Toegankelijkheid Expertteam Digitale Toegankelijkheid · NL Design System
Slack Slack · NL Design System
Design systems bij de overheid Design systems bij de overheid · NL Design System
Global design systems for governments Global design systems for governments · NL Design System
Sluit je aan bij onze community Sluit je aan bij onze community · NL Design System
Wie doet mee Wie doet mee · NL Design System
handboek
title title small document title
Figma-bestanden overzicht Figma-bestanden overzicht · NL Design System
GitHub GitHub · NL Design System
Design tokens versiebeheer Design tokens versiebeheer · NL Design System
Figma changelog Figma changelog · NL Design System
Figma hygiëne Figma hygiëne · NL Design System
Figma migratie-stappenplan Figma migratie-stappenplan · NL Design System
Figma stappenplan Figma stappenplan · NL Design System
Figma structuur Figma structuur · NL Design System
Introductie Introductie · NL Design System
Werken met de Figma changelog Werken met de Figma changelog · NL Design System
Werken met NL Design System Werken met NL Design System · NL Design System
Zelf componenten maken Zelf componenten maken · NL Design System
Zelf componenten uitbreiden Zelf componenten uitbreiden · NL Design System
Zelf een thema maken Zelf een thema maken · NL Design System
Aan de slag met NL Design System Aan de slag met NL Design System · NL Design System
API conventie API conventie · NL Design System
Migreer van een CDN naar pnpm Migreer van een CDN naar pnpm · NL Design System
CDN gebruiken CDN gebruiken · NL Design System
Nieuwe versies uitbrengen met Changesets Nieuwe versies uitbrengen met Changesets · NL Design System
Conventies Conventies · NL Design System
CSS conventie CSS conventie · NL Design System
Deprecation Deprecation · NL Design System
Design Token conventie Design Token conventie · NL Design System
Design tokens Design tokens · NL Design System
GitHub Actions GitHub Actions · NL Design System
Infrastructuur Infrastructuur · NL Design System
Introductie Introductie · NL Design System
Werken met Node.js Werken met Node.js · NL Design System
Werken met pnpm Werken met pnpm · NL Design System
Prototypes met NL Design System Prototypes met NL Design System · NL Design System
Prototypes zonder front-end framework Prototypes zonder front-end framework · NL Design System
Semantic Versioning Semantic Versioning · NL Design System
Namen van states Namen van states · NL Design System
Design tokens vastleggen Design tokens vastleggen · NL Design System
Overzicht Overzicht · NL Design System
3. Ontwikkelfase 3. Ontwikkelfase · NL Design System
5. Publicatiefase 5. Publicatiefase · NL Design System
1. Selectiefase 1. Selectiefase · NL Design System
4. Testfase 4. Testfase · NL Design System
2. Voorbereidings 2. Voorbereidings · NL Design System
Community stappenplan Community stappenplan · NL Design System
Community stappenplan voor het kernteam Community stappenplan voor het kernteam · NL Design System
Community stappenplan voor organisaties Community stappenplan voor organisaties · NL Design System
Definition of Done voor componenten Definition of Done voor componenten · NL Design System
Overzicht Overzicht · NL Design System
1. Feedbackfase 1. Feedbackfase · NL Design System
4. Ontwikkelfase 4. Ontwikkelfase · NL Design System
6. Publicatiefase 6. Publicatiefase · NL Design System
2. Selectiefase 2. Selectiefase · NL Design System
5. Testfase 5. Testfase · NL Design System
3. Voorbereidingsfase 3. Voorbereidingsfase · NL Design System
Help Wanted stappenplan Help Wanted stappenplan · NL Design System
Design tokens Design tokens · NL Design System
Thema's Thema's · NL Design System
Start-thema Start-thema · NL Design System
Voorbeeld-thema Voorbeeld-thema · NL Design System
Linting en code formatting Linting en code formatting · NL Design System
Security audit voor npm Security audit voor npm · NL Design System
Vercel Vercel · NL Design System
Componenten vinden Componenten vinden · NL Design System
Aanpak voor versionering Aanpak voor versionering · NL Design System
Estafettemodel Estafettemodel · NL Design System
Introductie Introductie · NL Design System
Voor leveranciers Voor leveranciers · NL Design System
Voor managers Voor managers · NL Design System
Naamgeving Naamgeving · NL Design System
Meedoen als organisatie Meedoen als organisatie · NL Design System
Tips voor NL Design System in aanbestedingen Tips voor NL Design System in aanbestedingen · NL Design System
project
title title small document title
Bedankt voor je aanmelding Bedankt voor je aanmelding · NL Design System
Project Project · NL Design System
Op de hoogte blijven Op de hoogte blijven · NL Design System
Veelgestelde vragen Veelgestelde vragen · NL Design System
Kernteam Kernteam · NL Design System
Klachten Klachten · NL Design System
Over NL Design System Over NL Design System · NL Design System
Beslissingen voor schrijfwijze Beslissingen voor schrijfwijze · NL Design System
Doelen Doelen · NL Design System
Doelgroepen Doelgroepen · NL Design System
Engels Engels · NL Design System
Schrijfwijzer Schrijfwijzer · NL Design System
Nederlands Nederlands · NL Design System
Opbouw van een pagina Opbouw van een pagina · NL Design System
Reviews Reviews · NL Design System
richtlijnen
title title small document title
Introductie Introductie · NL Design System
Introductie richtlijnen voor content Introductie richtlijnen voor content · NL Design System
Introductie richtlijnen voor afbeeldingen Introductie richtlijnen voor afbeeldingen · NL Design System
Algemene richtlijnen Algemene richtlijnen · NL Design System
Waar moet een alternatieve tekst staan? Waar moet een alternatieve tekst staan? · NL Design System
Decoratieve afbeeldingen Decoratieve afbeeldingen · NL Design System
Functionele afbeeldingen Functionele afbeeldingen · NL Design System
Grafieken Grafieken · NL Design System
Informatieve afbeeldingen Informatieve afbeeldingen · NL Design System
Tekst in een afbeelding Tekst in een afbeelding · NL Design System
Citaten Citaten · NL Design System
Kantoorbestanden Kantoorbestanden · NL Design System
Introductie richtlijnen voor tekstopmaak Introductie richtlijnen voor tekstopmaak · NL Design System
Kleurgebruik in tekst Kleurgebruik in tekst · NL Design System
Koppen Koppen · NL Design System
Toegankelijke linkteksten Toegankelijke linkteksten · NL Design System
Opsommingen Opsommingen · NL Design System
Taal instellen Taal instellen · NL Design System
Tabellen Tabellen · NL Design System
Tekst benadrukken Tekst benadrukken · NL Design System
Introductie richtlijnen voor video Introductie richtlijnen voor video · NL Design System
Audiodescriptie Audiodescriptie · NL Design System
Beschrijving voor video Beschrijving voor video · NL Design System
Flitsen in video Flitsen in video · NL Design System
Gebarentaal Gebarentaal · NL Design System
Ondertiteling Ondertiteling · NL Design System
Transcript Transcript · NL Design System
Introductie richtlijnen voor formulieren Introductie richtlijnen voor formulieren · NL Design System
Bevestigingspagina van een formulier Bevestigingspagina van een formulier · NL Design System
Zorg dat de gebruiker contact op kan nemen bij vragen Zorg dat de gebruiker contact op kan nemen bij vragen · NL Design System
Vermeld dat het formulier succesvol is verzonden Vermeld dat het formulier succesvol is verzonden · NL Design System
Maak de succesmelding toegankelijk voor alle gebruikers Maak de succesmelding toegankelijk voor alle gebruikers · NL Design System
Vertel wat de vervolgacties zijn Vertel wat de vervolgacties zijn · NL Design System
Buttons in een formulier Buttons in een formulier · NL Design System
Afbeeldingen als buttons Afbeeldingen als buttons · NL Design System
Disabled submitbuttons Disabled submitbuttons · NL Design System
Duidelijk buttontekst die beschrijft wat de button doet Duidelijk buttontekst die beschrijft wat de button doet · NL Design System
Verstuur een formulier niet automatisch na het wijzigen of invullen van een formulierveld Verstuur een formulier niet automatisch na het wijzigen of invullen van een formulierveld · NL Design System
Plaatsing van een button binnen een formulier Plaatsing van een button binnen een formulier · NL Design System
De toegankelijke naam van een button De toegankelijke naam van een button · NL Design System
Toetsenbordbediening van een button Toetsenbordbediening van een button · NL Design System
Descriptions in een formulier Descriptions in een formulier · NL Design System
Houd het aanklikbare gedeelte groot genoeg Houd het aanklikbare gedeelte groot genoeg · NL Design System
Gebruik alleen tekst in descriptions Gebruik alleen tekst in descriptions · NL Design System
Koppel een description aan het formulierveld Koppel een description aan het formulierveld · NL Design System
Houd de description kort en to-the-point Houd de description kort en to-the-point · NL Design System
Meerdere descriptions koppelen Meerdere descriptions koppelen · NL Design System
Plaats descriptions tussen label en formulierveld Plaats descriptions tussen label en formulierveld · NL Design System
Plaats descriptions bij een fieldset tussen legend en eerste item Plaats descriptions bij een fieldset tussen legend en eerste item · NL Design System
Fieldsets in een formulier Fieldsets in een formulier · NL Design System
Descriptions in een fieldset Descriptions in een fieldset · NL Design System
Legends Legends · NL Design System
Foutmeldingen in een formulier Foutmeldingen in een formulier · NL Design System
Schrijf een foutmelding uit in tekst Schrijf een foutmelding uit in tekst · NL Design System
Controleer op het juiste moment op fouten Controleer op het juiste moment op fouten · NL Design System
Schrijf een duidelijke foutmelding Schrijf een duidelijke foutmelding · NL Design System
Gebruik geen HTML-formuliervalidatie Gebruik geen HTML-formuliervalidatie · NL Design System
Zet de foutmeldingen bij de betreffende formuliervelden Zet de foutmeldingen bij de betreffende formuliervelden · NL Design System
Zet een samenvatting van de foutmeldingen boven het formulier Zet een samenvatting van de foutmeldingen boven het formulier · NL Design System
Geef feedback aan screenreadergebruikers Geef feedback aan screenreadergebruikers · NL Design System
Labels in een formulier Labels in een formulier · NL Design System
Zet alleen tekst in het label Zet alleen tekst in het label · NL Design System
Zorg ervoor dat het label altijd zichtbaar is Zorg ervoor dat het label altijd zichtbaar is · NL Design System
Gebruik duidelijke labelteksten Gebruik duidelijke labelteksten · NL Design System
Zet het label boven het formulierveld Zet het label boven het formulierveld · NL Design System
Geef een formulierveld een toegankelijke naam met een label Geef een formulierveld een toegankelijke naam met een label · NL Design System
De zichtbare naam moet overeenkomen met de toegankelijke naam De zichtbare naam moet overeenkomen met de toegankelijke naam · NL Design System
Links in een formulier Links in een formulier · NL Design System
Zet geen link in een label Zet geen link in een label · NL Design System
Geef aan als een link in een nieuwe tab opent Geef aan als een link in een nieuwe tab opent · NL Design System
Plaats de link boven het gerelateerde formulierveld Plaats de link boven het gerelateerde formulierveld · NL Design System
Meerdere stappen in een formulier Meerdere stappen in een formulier · NL Design System
Zorg voor een consistente navigatie en benaming van links en buttons Zorg voor een consistente navigatie en benaming van links en buttons · NL Design System
Plaats de informatie over waar de gebruiker is in de stappen boven het formulier Plaats de informatie over waar de gebruiker is in de stappen boven het formulier · NL Design System
Bied als laatste stap een opsomming aan van alle ingevoerde gegevens Bied als laatste stap een opsomming aan van alle ingevoerde gegevens · NL Design System
Geef duidelijk aan wanneer het formulier verzonden gaat worden Geef duidelijk aan wanneer het formulier verzonden gaat worden · NL Design System
Geef aan hoeveel stappen er zijn en in welke stap de gebruiker zich bevindt Geef aan hoeveel stappen er zijn en in welke stap de gebruiker zich bevindt · NL Design System
Placeholders in een formulier Placeholders in een formulier · NL Design System
Zorg voor een goed kleurcontrast van de placeholdertekst Zorg voor een goed kleurcontrast van de placeholdertekst · NL Design System
Een placeholder is geen vervanger van een label Een placeholder is geen vervanger van een label · NL Design System
Voorkom verwarring bij de gebruiker Voorkom verwarring bij de gebruiker · NL Design System
Placeholders en de zoekfunctie Placeholders en de zoekfunctie · NL Design System
Status in een formulier Status in een formulier · NL Design System
Geef gebruikers voldoende tijd Geef gebruikers voldoende tijd · NL Design System
Informeer gebruikers van screenreaders over het statusbericht Informeer gebruikers van screenreaders over het statusbericht · NL Design System
Informeer ingezoomde gebruikers Informeer ingezoomde gebruikers · NL Design System
Toetsenbordnavigatie in een formulier Toetsenbordnavigatie in een formulier · NL Design System
Gebruik geen positieve tabindex Gebruik geen positieve tabindex · NL Design System
Zorg dat het formulier werkt met een toetsenbord Zorg dat het formulier werkt met een toetsenbord · NL Design System
Visueel ontwerp van een formulier Visueel ontwerp van een formulier · NL Design System
Maak toetsenbordfocus goed zichtbaar Maak toetsenbordfocus goed zichtbaar · NL Design System
Geef fouten weer met meer dan alleen kleur Geef fouten weer met meer dan alleen kleur · NL Design System
Gebruik geen afbeelding voor buttons maar stijl tekst met CSS Gebruik geen afbeelding voor buttons maar stijl tekst met CSS · NL Design System
Maak aanklikbare formuliervelden groot genoeg Maak aanklikbare formuliervelden groot genoeg · NL Design System
Geef duidelijk aan waar een invoerveld is Geef duidelijk aan waar een invoerveld is · NL Design System
Zorg voor een logische volgorde van de informatie Zorg voor een logische volgorde van de informatie · NL Design System
Geef placeholders voldoende kleurcontrast Geef placeholders voldoende kleurcontrast · NL Design System
Geef tekst voldoende kleurcontrast Geef tekst voldoende kleurcontrast · NL Design System
Voorkom fouten in een formulier Voorkom fouten in een formulier · NL Design System
Autocomplete in een formulier Autocomplete in een formulier · NL Design System
Vul bekende informatie in waar mogelijk Vul bekende informatie in waar mogelijk · NL Design System
Maak het mogelijk een inzending te controleren, te wijzigen of ongedaan te maken Maak het mogelijk een inzending te controleren, te wijzigen of ongedaan te maken · NL Design System
Maak het mogelijk een inzending te controleren, te wijzigen of ongedaan te maken Maak het mogelijk een inzending te controleren, te wijzigen of ongedaan te maken · NL Design System
Geef geldige waardes aan voor een invoerveld Geef geldige waardes aan voor een invoerveld · NL Design System
Keur niet te snel af Keur niet te snel af · NL Design System
Vermeld duidelijk of een veld wel of niet verplicht is Vermeld duidelijk of een veld wel of niet verplicht is · NL Design System
Sta knippen en plakken van een wachtwoord toe Sta knippen en plakken van een wachtwoord toe · NL Design System
Uit te vragen informatie in een formulier Uit te vragen informatie in een formulier · NL Design System
Check of informatie ècht nodig is Check of informatie ècht nodig is · NL Design System
Geef invoervelden geen minimum/maximum tekstlengte Geef invoervelden geen minimum/maximum tekstlengte · NL Design System
Leg uit waarom informatie nodig is Leg uit waarom informatie nodig is · NL Design System
Biedt verschillende manieren om contact op te nemen Biedt verschillende manieren om contact op te nemen · NL Design System
Vraag niet meerdere keren dezelfde informatie uit Vraag niet meerdere keren dezelfde informatie uit · NL Design System
Wanneer gebruik je welk formulierelement? Wanneer gebruik je welk formulierelement? · NL Design System
Zorg dat iedereen een formulierelement kan bedienen of geef een alternatief Zorg dat iedereen een formulierelement kan bedienen of geef een alternatief · NL Design System
Kies voor het meest gebruiksvriendelijke formulierelement Kies voor het meest gebruiksvriendelijke formulierelement · NL Design System
Introductie richtlijnen voor stijl Introductie richtlijnen voor stijl · NL Design System
Introductie richtlijnen voor iconen Introductie richtlijnen voor iconen · NL Design System
Maak functionele iconen simpel van vorm Maak functionele iconen simpel van vorm · NL Design System
Gebruik SVG voor iconen en geen font Gebruik SVG voor iconen en geen font · NL Design System
Stem de grootte van je iconen af op je lettergrootte Stem de grootte van je iconen af op je lettergrootte · NL Design System
Zorg ook bij iconen voor voldoende contrast Zorg ook bij iconen voor voldoende contrast · NL Design System
Laat de lijndikte meeschalen Laat de lijndikte meeschalen · NL Design System
Positioneer iconen binnen een vierkant grid Positioneer iconen binnen een vierkant grid · NL Design System
Respecteer conventies Respecteer conventies · NL Design System
Toptaak iconen kunnen gedetailleerd zijn Toptaak iconen kunnen gedetailleerd zijn · NL Design System
Introductie richtlijnen voor kleuren Introductie richtlijnen voor kleuren · NL Design System
Zorg voor voldoende kleurcontrast voor niet-tekstuele content Zorg voor voldoende kleurcontrast voor niet-tekstuele content · NL Design System
Zorg voor voldoende kleurcontrast voor tekst tegen de achtergrond Zorg voor voldoende kleurcontrast voor tekst tegen de achtergrond · NL Design System
Gebruik kleur met een doel Gebruik kleur met een doel · NL Design System
Vertrouw niet alleen op kleur Vertrouw niet alleen op kleur · NL Design System
Let op voorkeursinstellingen voor kleur Let op voorkeursinstellingen voor kleur · NL Design System
Let op verschillen in waarneming van kleur Let op verschillen in waarneming van kleur · NL Design System
Introductie richtlijnen voor ruimte Introductie richtlijnen voor ruimte · NL Design System
Werk en denk vanuit het box model Werk en denk vanuit het box model · NL Design System
Gebruik ruimte om hiërarchie te creëren tussen elementen Gebruik ruimte om hiërarchie te creëren tussen elementen · NL Design System
Reserveer ruimte tussen interactieve elementen Reserveer ruimte tussen interactieve elementen · NL Design System
Gebruik ruimte om relaties te creëren tussen elementen Gebruik ruimte om relaties te creëren tussen elementen · NL Design System
Stem het gebruik van ruimte af op de functie en inhoud Stem het gebruik van ruimte af op de functie en inhoud · NL Design System
Maak gebruik van de spacing concepten Maak gebruik van de spacing concepten · NL Design System
Maak gebruik van een spacing scale Maak gebruik van een spacing scale · NL Design System
Introductie richtlijnen voor typografie Introductie richtlijnen voor typografie · NL Design System
Zorg ervoor dat letters groot genoeg zijn Zorg ervoor dat letters groot genoeg zijn · NL Design System
Kies een goed lettertype Kies een goed lettertype · NL Design System
Zorg voor een comfortabele regelafstand Zorg voor een comfortabele regelafstand · NL Design System
Zorg voor een comfortabele regellengte Zorg voor een comfortabele regellengte · NL Design System
Uitlijning Uitlijning · NL Design System
Let op voorkeursinstellingen voor typografie Let op voorkeursinstellingen voor typografie · NL Design System
voorbeelden
title title small document title
Introductie Introductie · NL Design System
Gebruikersonderzoek Gebruikersonderzoek · NL Design System
Introductie patronen en templates Introductie patronen en templates · NL Design System
Formulieren Formulieren · NL Design System
Mijn omgevingen Mijn omgevingen · NL Design System
woordenlijst
title title small document title
Woordenlijst Woordenlijst · NL Design System
open-source
title title small document title
Creative Commons 0 Universal licentie Creative Commons 0 Universal licentie · NL Design System
EUPL 1.2 licentie EUPL 1.2 licentie · NL Design System
private
title title small document title
Doelen van NL Design System componenten Doelen van NL Design System componenten · NL Design System
wcag
title title small document title
Introductie WCAG pagina's Introductie WCAG pagina's · NL Design System
WCAG-succescriterium 1.1.1 Niet-tekstuele content WCAG 1.1.1 WCAG 1.1.1 · NL Design System
WCAG-succescriterium 1.2.1 Louter-geluid en louter-videobeeld (vooraf opgenomen) WCAG 1.2.1 WCAG 1.2.1 · NL Design System
WCAG-succescriterium 1.2.2 Ondertitels voor doven en slechthorenden (vooraf opgenomen) WCAG 1.2.2 WCAG 1.2.2 · NL Design System
WCAG-succescriterium 1.2.3 Audiodescriptie of media-alternatief (vooraf opgenomen) WCAG 1.2.3 WCAG 1.2.3 · NL Design System
WCAG-succescriterium 1.2.4 Ondertitels voor doven en slechthorenden (live) WCAG 1.2.4 WCAG 1.2.4 · NL Design System
WCAG-succescriterium 1.2.5 Audiodescriptie (vooraf opgenomen) WCAG 1.2.5 WCAG 1.2.5 · NL Design System
WCAG-succescriterium 1.2.6 Gebarentaal (vooraf opgenomen) WCAG 1.2.6 WCAG 1.2.6 · NL Design System
WCAG-succescriterium 1.2.7 Verlengde audiodescriptie (vooraf opgenomen) WCAG 1.2.7 WCAG 1.2.7 · NL Design System
WCAG-succescriterium 1.2.8 Media-alternatief (vooraf opgenomen) WCAG 1.2.8 WCAG 1.2.8 · NL Design System
WCAG-succescriterium 1.2.9 Louter-geluid (live) WCAG 1.2.9 WCAG 1.2.9 · NL Design System
WCAG-succescriterium 1.3.1 Info en relaties WCAG 1.3.1 WCAG 1.3.1 · NL Design System
WCAG-succescriterium 1.3.2 Betekenisvolle volgorde WCAG 1.3.2 WCAG 1.3.2 · NL Design System
WCAG-succescriterium 1.3.3 Zintuiglijke eigenschappen WCAG 1.3.3 WCAG 1.3.3 · NL Design System
WCAG-succescriterium 1.3.4 Weergavestand WCAG 1.3.4 WCAG 1.3.4 · NL Design System
WCAG-succescriterium 1.3.5 Identificeer het doel van de input WCAG 1.3.5 WCAG 1.3.5 · NL Design System
WCAG-succescriterium 1.3.6 Identificeer het doel WCAG 1.3.6 WCAG 1.3.6 · NL Design System
WCAG-succescriterium 1.4.1 Gebruik van kleur WCAG 1.4.1 WCAG 1.4.1 · NL Design System
WCAG-succescriterium 1.4.10 Reflow WCAG 1.4.10 WCAG 1.4.10 · NL Design System
WCAG-succescriterium 1.4.11 Contrast van niet-tekstuele content WCAG 1.4.11 WCAG 1.4.11 · NL Design System
WCAG-succescriterium 1.4.12 Tekstafstand WCAG 1.4.12 WCAG 1.4.12 · NL Design System
WCAG-succescriterium 1.4.13 Content bij hover of focus WCAG 1.4.13 WCAG 1.4.13 · NL Design System
WCAG-succescriterium 1.4.2 Geluidsbediening WCAG 1.4.2 WCAG 1.4.2 · NL Design System
WCAG-succescriterium 1.4.3 Contrast (minimum) WCAG 1.4.3 WCAG 1.4.3 · NL Design System
WCAG-succescriterium 1.4.4 Herschalen van tekst WCAG 1.4.4 WCAG 1.4.4 · NL Design System
WCAG-succescriterium 1.4.5 Afbeeldingen van tekst WCAG 1.4.5 WCAG 1.4.5 · NL Design System
WCAG-succescriterium 1.4.6 Contrast (versterkt) WCAG 1.4.6 WCAG 1.4.6 · NL Design System
WCAG-succescriterium 1.4.7 Weinig of geen achtergrondgeluid WCAG 1.4.7 WCAG 1.4.7 · NL Design System
WCAG-succescriterium 1.4.8 Visuele presentatie WCAG 1.4.8 WCAG 1.4.8 · NL Design System
WCAG-succescriterium 1.4.9 Afbeeldingen van tekst (geen uitzondering) WCAG 1.4.9 WCAG 1.4.9 · NL Design System
WCAG-succescriterium 2.1.1 Toetsenbord WCAG 2.1.1 WCAG 2.1.1 · NL Design System
WCAG-succescriterium 2.1.2 Geen toetsenbordval WCAG 2.1.2 WCAG 2.1.2 · NL Design System
WCAG-succescriterium 2.1.3 Toetsenbord (geen uitzondering) WCAG 2.1.3 WCAG 2.1.3 · NL Design System
WCAG-succescriterium 2.1.4 Enkel teken sneltoetsen WCAG 2.1.4 WCAG 2.1.4 · NL Design System
WCAG-succescriterium 2.2.1 Timing aanpasbaar WCAG 2.2.1 WCAG 2.2.1 · NL Design System
WCAG-succescriterium 2.2.2 Pauzeren, stoppen, verbergen WCAG 2.2.2 WCAG 2.2.2 · NL Design System
WCAG-succescriterium 2.2.3 Geen timing WCAG 2.2.3 WCAG 2.2.3 · NL Design System
WCAG-succescriterium 2.2.4 Onderbrekingen WCAG 2.2.4 WCAG 2.2.4 · NL Design System
WCAG-succescriterium 2.2.5 Herauthentisering WCAG 2.2.5 WCAG 2.2.5 · NL Design System
WCAG-succescriterium 2.2.6 Time-outs WCAG 2.2.6 WCAG 2.2.6 · NL Design System
WCAG-succescriterium 2.3.1 Drie flitsen of beneden drempelwaarde WCAG 2.3.1 WCAG 2.3.1 · NL Design System
WCAG-succescriterium 2.3.2 Drie flitsen WCAG 2.3.2 WCAG 2.3.2 · NL Design System
WCAG-succescriterium 2.3.3 Animatie uit interacties WCAG 2.3.3 WCAG 2.3.3 · NL Design System
WCAG-succescriterium 2.4.1 Blokken omzeilen WCAG 2.4.1 WCAG 2.4.1 · NL Design System
WCAG-succescriterium 2.4.10 Paragraafkoppen WCAG 2.4.10 WCAG 2.4.10 · NL Design System
WCAG-succescriterium 2.4.11 Focus niet bedekt (minimum) WCAG 2.4.11 WCAG 2.4.11 · NL Design System
WCAG-succescriterium 2.4.12 Focus niet bedekt (uitgebreid) WCAG 2.4.12 WCAG 2.4.12 · NL Design System
WCAG-succescriterium 2.4.13 Focusweergave WCAG 2.4.13 WCAG 2.4.13 · NL Design System
WCAG-succescriterium 2.4.2 Paginatitel WCAG 2.4.2 WCAG 2.4.2 · NL Design System
WCAG-succescriterium 2.4.3 Focus volgorde WCAG 2.4.3 WCAG 2.4.3 · NL Design System
WCAG-succescriterium 2.4.4 Linkdoel (in context) WCAG 2.4.4 WCAG 2.4.4 · NL Design System
WCAG-succescriterium 2.4.5 Meerdere manieren WCAG 2.4.5 WCAG 2.4.5 · NL Design System
WCAG-succescriterium 2.4.6 Koppen en labels WCAG 2.4.6 WCAG 2.4.6 · NL Design System
WCAG-succescriterium 2.4.7 Focus zichtbaar WCAG 2.4.7 WCAG 2.4.7 · NL Design System
WCAG-succescriterium 2.4.8 Locatie WCAG 2.4.8 WCAG 2.4.8 · NL Design System
WCAG-succescriterium 2.4.9 Linkdoel (alleen link) WCAG 2.4.9 WCAG 2.4.9 · NL Design System
WCAG-succescriterium 2.5.1 Aanwijzergebaren WCAG 2.5.1 WCAG 2.5.1 · NL Design System
WCAG-succescriterium 2.5.2 Aanwijzerannulering WCAG 2.5.2 WCAG 2.5.2 · NL Design System
WCAG-succescriterium 2.5.3 Label in Naam WCAG 2.5.3 WCAG 2.5.3 · NL Design System
WCAG-succescriterium 2.5.4 Bewegingsactivering WCAG 2.5.4 WCAG 2.5.4 · NL Design System
WCAG-succescriterium 2.5.5 Grootte van het aanwijsgebied (uitgebreid) WCAG 2.5.5 WCAG 2.5.5 · NL Design System
WCAG-succescriterium 2.5.6 Input gelijktijdige invoermechanismen WCAG 2.5.6 WCAG 2.5.6 · NL Design System
WCAG-succescriterium 2.5.7 Sleepbewegingen WCAG 2.5.7 WCAG 2.5.7 · NL Design System
WCAG-succescriterium 2.5.8 Grootte van het aanwijsgebied (minimum) WCAG 2.5.8 WCAG 2.5.8 · NL Design System
WCAG-succescriterium 3.1.1 Taal van de pagina WCAG 3.1.1 WCAG 3.1.1 · NL Design System
WCAG-succescriterium 3.1.2 Taal van onderdelen WCAG 3.1.2 WCAG 3.1.2 · NL Design System
WCAG-succescriterium 3.1.3 Ongebruikelijke woorden WCAG 3.1.3 WCAG 3.1.3 · NL Design System
WCAG-succescriterium 3.1.4 Afkortingen WCAG 3.1.4 WCAG 3.1.4 · NL Design System
WCAG-succescriterium 3.1.5 Leesniveau WCAG 3.1.5 WCAG 3.1.5 · NL Design System
WCAG-succescriterium 3.1.6 Uitspraak WCAG 3.1.6 WCAG 3.1.6 · NL Design System
WCAG-succescriterium 3.2.1 Bij focus WCAG 3.2.1 WCAG 3.2.1 · NL Design System
WCAG-succescriterium 3.2.2 Bij input WCAG 3.2.2 WCAG 3.2.2 · NL Design System
WCAG-succescriterium 3.2.3 Consistente navigatie WCAG 3.2.3 WCAG 3.2.3 · NL Design System
WCAG-succescriterium 3.2.4 Consistente identificatie WCAG 3.2.4 WCAG 3.2.4 · NL Design System
WCAG-succescriterium 3.2.5 Verandering op verzoek WCAG 3.2.5 WCAG 3.2.5 · NL Design System
WCAG-succescriterium 3.2.6 Consistente hulp WCAG 3.2.6 WCAG 3.2.6 · NL Design System
WCAG-succescriterium 3.3.1 Foutidentificatie WCAG 3.3.1 WCAG 3.3.1 · NL Design System
WCAG-succescriterium 3.3.2 Labels of instructies WCAG 3.3.2 WCAG 3.3.2 · NL Design System
WCAG-succescriterium 3.3.3 Foutsuggestie WCAG 3.3.3 WCAG 3.3.3 · NL Design System
WCAG-succescriterium 3.3.4 Foutpreventie (wettelijk, financieel, gegevens) WCAG 3.3.4 WCAG 3.3.4 · NL Design System
WCAG-succescriterium 3.3.5 Hulp WCAG 3.3.5 WCAG 3.3.5 · NL Design System
WCAG-succescriterium 3.3.6 Foutpreventie (alle) WCAG 3.3.6 WCAG 3.3.6 · NL Design System
WCAG-succescriterium 3.3.7 Overbodige invoer WCAG 3.3.7 WCAG 3.3.7 · NL Design System
WCAG-succescriterium 3.3.8 Toegankelijke authenticatie (minimum) WCAG 3.3.8 WCAG 3.3.8 · NL Design System
WCAG-succescriterium 3.3.9 Toegankelijke authenticatie (uitgebreid) WCAG 3.3.9 WCAG 3.3.9 · NL Design System
WCAG-succescriterium 4.1.1 Parsen WCAG 4.1.1 WCAG 4.1.1 · NL Design System
WCAG-succescriterium 4.1.2 Naam, rol, waarde WCAG 4.1.2 WCAG 4.1.2 · NL Design System
WCAG-succescriterium 4.1.3 Statusberichten WCAG 4.1.3 WCAG 4.1.3 · NL Design System