Componenten
De componenten van NL Design System worden met een estafette aanpak gemaakt en kunnen dus verschillende statussen hebben.
Accordion
Help Wanted
Secties met de mogelijkheid om gerelateerde content te tonen en weer te verbergen.
Action group
Help Wanted
Groepeert één of meer gerelateerde acties en verzorgt de lay-out van de content.
Alert
Todo
Alert dialog
Todo
Avatar
Todo
Toont een grafische weergave van een gebruiker, meestal in de vorm van een foto, illustratie, of initialen.
Blockquote
Help Wanted
Toont een citaat dat afwijkt van de hoofdtekst.
Breadcrumb navigation
Todo
Toont de locatie van de pagina binnen de hiërarchie van een website en biedt de mogelijkheid om tussen niveaus te navigeren.
Button
Help Wanted
Biedt de mogelijkheid om een actie uit te voeren.
Calendar
Todo
Toont een op maat gemaakte kalender die de mogelijkheid biedt om uit een beschikbare datum te kiezen.
Card as link
Todo
Case card
Help Wanted
Toont meta-informatie over een zaak en biedt de mogelijkheid hier naartoe te navigeren.
Checkbox
Todo
Checkbox group
Todo
Biedt de mogelijkheid om geen, één of meerdere opties te selecteren uit een lijst.
Data badge
Todo
Toont een klein label dat de aandacht trekt en informeert bijvoorbeeld over een categorie.
Date input
Todo
Biedt de mogelijkheid om een datum in te vullen of te kiezen uit een standaard ingebouwde kalender.
Date input group
Todo
Biedt de mogelijkheid om een datum in te vullen die bekend of makkelijk op te zoeken is.
Date picker
Todo
Definition list
Todo
Dot badge
Todo
Drawer
Todo
Fieldset
Todo
Groepeert gerelateerde formulier elementen.
Figure
Todo
Groepeert content zoals bijvoorbeeld een afbeelding, eventueel aangevuld met een bijschrift.
File input
Todo
Biedt de mogelijkheid om één of meerdere bestanden te selecteren en te uploaden.
Form field
Todo
Groepeert de verschillende onderdelen van een formulier element en kan gevalideerd worden.
Form field checkbox option
Todo
Form field description
Help Wanted
Toont ondersteunende tekst en biedt extra context over de in te vullen informatie.
Form field error message
Help Wanted
Toont een foutmelding die informeert wat er is fout gegaan en hoe dit is op te lossen.
Form field label
Help Wanted
Toont een tekstlabel dat informeert over de in te vullen informatie.
Form field option label
Todo
Form field partial
Todo
Form field partial label
Todo
Form field radio option
Todo
Heading
Help Wanted
Toont een titel en helpt de inhoud van een pagina te structureren.
Heading 1
Todo
Toont de eerste titel van de pagina en helpt de inhoud van een pagina te structureren.
Heading 2
Todo
Toont de titel van een sectie en helpt de inhoud van een pagina te structureren.
Heading 3
Todo
Heading 4
Todo
Heading 5
Todo
Heading 6
Todo
Heading group
Todo
Toont een combinatie van een titel en ondersteunende tekst.
Icon
Todo
Invalid form alert
Todo
Language navigation
Todo
Biedt de optie om een andere taal te selecteren.
Legend
Todo
Link
Help Wanted
Biedt de mogelijkheid om naar andere pagina's of secties te navigeren.
Link list
Todo
Toont een lijst aan gerelateerde links.
Modal dialog
Todo
Toont een venster over de pagina om de aandacht op een enkele taak of bericht te vestigen. Interactie met onderliggende pagina wordt geblokkeerd.
Navigation bar
Todo
Toont een hiërarchische horizontale navigatie aan de bovenkant van een pagina en biedt de mogelijkheid om tussen pagina’s te navigeren.
Non modal dialog
Todo
Notification banner
Todo
Number badge
Help Wanted
Klein label dat de aandacht trekt informeert over een aantal.
Number input
Todo
Biedt de mogelijkheid om een numerieke waarde in te vullen.
Ordered list
Help Wanted
Toont een lijst met items waarvan de volgorde betekenis heeft.
Page footer
Todo
Page header
Todo
Pagination
Todo
Paragraph
Community
Toont een alinea aan tekst.
Password input
Todo
Pre heading
Todo
Progress bar
Todo
Toont de voortgang van een proces in een balk.
Progress list
Todo
Toont de voortgang van een reeks stappen en biedt indien nodig extra details over een stap.
Radio button
Todo
Radio group
Todo
Biedt de mogelijkheid om één optie te selecteren uit een lijst.
Range
Todo
Toont een visuele indicatie van aanpasbare inhoud en biedt de mogelijkheid om een waarde binnen een vooraf ingesteld bereik te kiezen.
Rich text content
Todo
Select
Todo
Biedt de mogelijkheid om één optie te selecteren uit een opgeklapte lijst.
Separator
Todo
Toont een horizontale lijn om content te scheiden.
Side navigation
Todo
Toont een hiërarchische, verticale navigatie aan de zijkant van een pagina.
Skip link
Help Wanted
Biedt de mogelijkheid om content over te slaan en direct naar een onderdeel binnen pagina te navigeren.
Spinner
Todo
Toont een animatie die aangeeft dat een pagina of een deel ervan aan het laden is, of een interactie blokkeert.
Status badge
Todo
Strong
Todo
Sub heading
Todo
Summary list
Todo
Switch
Todo
Table
Todo
Toont en organiseert data in gestructureerde rijen en kolommen.
Tabs
Todo
Biedt de mogelijkheid om tussen gerelateerde secties te navigeren, waarbij maar één sectie wordt weergegeven.
Task list
Todo
Text input
Todo
Biedt de mogelijkheid om één regel aan tekens in te vullen.
Text input group
Todo
Textarea
Todo
Toggletip
Todo
Unordered list
Help Wanted
Toont een lijst met items waarvan de volgorde geen betekenis heeft.
Video
Todo
Toont video-inhoud en biedt de mogelijkheid om video’s te besturen, zoals het starten, pauzeren en stoppen.