---
# System prepended metadata

title: Naam component

---

Dit template dient als vast stramien voor de ux documentatie van componenten. Als een onderdeel niet van toepassing is kun je dit verwijderen. Probeer de documentatie kort en bondig te houden.

# Naam component (verplicht)

## Doel (verplicht)
Wat is het doel van de component in 1 a 2 zinnen.

## Ook bekend als
Hoe wordt dit component ook wel genoemd.

## Gerelateerde componenten
Verwijs hier naar gerelateerde componenten die ook als variant zouden kunnen gelden maar hun eigen documentatie pagina hebben. Denk bijvoorbeeld aan Card en Card-as-link. Of Button en Button-as-link.

## Anatomie (verplicht)
Beschrijf hier de anatomie van de component. Maak gebruik van een afbeelding en een nummerieke opsomming. Maak voor naamgeving gebruik van de NL Design System naming conventie.

## Gebruik

### Wel gebruiken (verplicht)
Beschrijf hier waar je de component voor kan gebruiken. Maak gebruik van een opsomming.

### Niet gebruiken
Beschrijf hier waar je de component niet voor moet gebruiken. Maak gebruik van een opsomming. Verwijs, indien mogelijk, naar een ander component dat hiervoor wel geschikt is.

## Best practices
Beschrijf hier best practices voor de component. Maak gebruik van opsommingen, do's and dont's, en afbeeldingen.

🙂 **Doen**
Beschrijf hier wat men wel zou moeten doen.

🙁 **Niet doen**
Beschrijf hier wat men niet zou moeten doen.

### Best practices specifiek voor organisatie
Beschrijf hier best practices die specifiek voor jouw organisatie gelden.

## Variaties
Beschrijf hier de variaties voor de component. Denk hierbij aan:

* Primairy, Secundairy of Subtle.
* Positive, Negative, Informative of Warning.
* Default, Large of Small.

Maak gebruik van opsommingen en afbeeldingen.

### Variaties specifiek voor organisatie
Beschrijf hier variaties die specifiek voor jouw organisatie gelden.

## Gedrag
Beschrijf hier het gedrag van de component. Denk hierbij aan de volgende onderdelen. Maak gebruik van opsommingen en mogelijk afbeeldingen.

### Interactie
Beschrijf hier de interactie van de component.

### States
Beschrijf hier de states van de component.

### Responsive
Beschrijf hier het responsvie gedrag van de component.

### Content resilience
Beschrijf hier hoe de component zich gedraagd bij veel, weinig of ontbrekende content.

### Internationalization
Beschrijf hier hoe de component zich gedraagd wanneer men van rechts naar links leest. Of waar men op zou moeten letten vanuit een internationaal oogpunt.

### Focus order
Beschrijf hier de focus order van de component.

### Progressive enhancement
Beschrijf hier hoe de component zich gedraagd wanneer bepaalde technieken niet beschikbaar zijn.

### Gedrag specifiek voor organisatie
Beschrijf hier het gedrag dat specifiek voor jouw organisatie geldt.

## Toegankelijkheid
Beschrijf hier toegankelijkheid richtlijnen voor de component.

## Copy
Beschrijf hier copy richtlijnen voor de component.

## Highlight blocks

☝️ **Inzicht uit onderzoek**
Hier een inzicht uit een onderzoek uitgelicht.

✅ **Tip**
Hier een tip uitgelicht.

❗️ **Let op**
Hier een waarschuwing uitgelicht.

## Meer informatie

### Gerelateerde WCAG Richtlijnen
Verwijs hier naar gerelateerde WCAG richtlijnen. Zoals onderstaand voorbeeld:

- [1.4.1: Use of color](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html)
- [1.4.3: Contrast (minimum)](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html)
- [1.4.11: Non-text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html)

### Links
Verwijs hier naar gerelateerde documentatie. Zoals onderstaand voorbeeld:

[Color and Contrast - Nate Baldwin](https://colorandcontrast.com/)
Website met uitgebreide en interactieve documentatie over kleur.

[Accessible Palette - Eugene Fedorenko](https://accessiblepalette.com/)
Online tool waarmee je een kleurenpalet kunt genereren en direct contrast kunt checken.
