Componenten
De componenten van NL Design System worden met een estafette aanpak gemaakt en kunnen dus verschillende statussen hebben.
90 van 90 componenten zichtbaar
Accordion
Community
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
Belangrijk bericht dat informeert over de huidige activiteit van de gebruiker.
Alert dialog
Todo
Opent een venster waarin de gebruiker een actie moet uitvoeren om verder te gaan. De rest van de pagina is tijdelijk geblokkeerd.
Avatar
Todo
Een afbeelding die een identiteit vertegenwoordigt, meestal in de vorm van een foto, illustratie, of initialen.
Blockquote
Community
Toont een citaat dat afwijkt van de hoofdtekst.
Breadcrumb navigation
Community
Toont de locatie van de pagina binnen de hiërarchie van een website en biedt de mogelijkheid om tussen niveaus te navigeren.
Button
Community
Biedt de mogelijkheid om een actie uit te voeren.
Calendar
Todo
Een kalender waarin je een beschikbare datum kan kiezen.
Card as link
Todo
Korte sectie die als geheel een link is naar een gerelateerde pagina.
Case card
Help Wanted
Toont meta-informatie over een zaak en biedt de mogelijkheid hier naartoe te navigeren.
Checkbox
Todo
Invoerveld voor het kiezen van een optie uit een groep van opties, of om te kiezen tussen "wel" of "niet".
Checkbox group
Todo
Biedt de mogelijkheid om geen, één of meerdere opties te selecteren uit een lijst.
Code
Todo
Markeert tekst dat code vertegenwoordigt.
Code block
Todo
Toont één of meerdere regels computercode en behoudt de opmaak van deze code.
Color sample
Todo
Toont een voorbeeld van een kleur.
Data badge
Todo
Label met extra informatie, zoals een categorie of een eigenschap.
Date input
Help Wanted
Invoerveld om een datum in te vullen met de mogelijkheden die de browser biedt.
Date input group
Todo
Formulierveld voor een datum die de gebruiker al weet of die van bekende gegevens overgenomen kan worden.
Date picker
Todo
Biedt de mogelijkheid om een beschikbare datum te kiezen uit een op maat gemaakte kalender.
Description list
Help Wanted
Toont een lijst aan termen en hun beschrijving, bijvoorbeeld een woordenlijst.
Dot badge
Todo
Drawer
Todo
Een paneel aan de zijkant van een scherm, die geopend kan worden voor gerelateerde informatie, formulieren of acties.
Fieldset
Todo
Groep van gerelateerde formuliervelden.
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
Een invoerveld en bijbehorende onderdelen die helpen bij het invullen.
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
Community
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
Koptekst die in de koppenstructuur ingesteld kan worden op het juiste niveau.
Heading 1
Community
Hoofdkop van een pagina.
Heading 2
Community
Koptekst die volgt na de hoofdkop en in de koppenstructuur op het tweede niveau staat.
Heading 3
Community
Koptekst die in de koppenstructuur op het derde niveau staat.
Heading 4
Community
Koptekst die in de koppenstructuur op het vierde niveau staat.
Heading 5
Community
Koptekst die in de koppenstructuur op het vijfde niveau staat.
Heading 6
Community
Koptekst die in de koppenstructuur op het zesde niveau staat.
Heading group
Todo
Toont een combinatie van een titel en ondersteunende tekst.
Icon
Todo
Invalid form alert
Todo
Language navigation
Todo
Eén of meerdere links om de website te openen in een andere taal.
Link
Community
Een verwijzing om een een externe bron of bestand te openen of te navigeren binnen dezelfde pagina of website.
Link list
Help Wanted
Een lijst met gerelateerde links naar andere pagina’s of websites.
Login link
Help Wanted
Biedt de mogelijkheid om naar de beschikbare inlogmiddelen te navigeren.
Mark
Todo
Markeert tekst, zodat je ernaar kan verwijzen vanuit een andere context of omdat de tekst relevant is voor de huidige activiteit.
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
Help Wanted
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
Community
Klein label dat de aandacht trekt informeert over een aantal.
Number input
Todo
Invoerveld voor een heel getal of een getal met decimalen.
Ordered list
Community
Lijst waarvan de volgorde van items betekenis heeft.
Page footer
Todo
Page header
Todo
Een plek bovenaan elke pagina voor een logo, navigatie en zoeken.
Pagination
Todo
Paragraph
Community
Toont een alinea aan tekst.
Password input
Todo
Afgeschermd invoerveld om een geheime tekst in te vullen, zoals een wachtwoord.
Pre-heading
Todo
Een ondersteunende tekst die boven een kop staat.
Progress bar
Todo
Toont de voortgang van een proces in een balk.
Progress list
Help Wanted
Toont de voortgang van een reeks stappen en biedt indien nodig extra details over een stap.
Radio button
Todo
Invoerveld voor het kiezen van een enkele optie uit een groep van opties.
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
Tekst met uitgebreide opmaakopties zoals links, koppen, lijsten en tabellen.
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
Community
Verborgen mogelijkheid om snel naar een ander deel van de pagina te navigeren zonder gebruik te maken van een muis of touchscreen.
Spinner
Todo
Een animatie die aangeeft dat een proces nog bezig is, waardoor een deel van de pagina nog niet volledig is geladen of buttons niet bedienbaar zijn.
Status badge
Todo
Strong
Todo
Korte belangrijke tekst die vetgedrukt wordt weergegeven.
Subheading
Todo
Subscript
Todo
Toont tekst met een kleiner lettertype met een verlaagde letterlijn.
Summary list
Todo
Superscript
Todo
Toont tekst met een kleiner lettertype met een verhoogde letterlijn.
Switch
Todo
Invoerveld om een optie aan of uit te zetten.
Table
Todo
Structureert data in rijen en kolommen.
Tabs
Todo
Paneel om onderwerpen te groeperen, waarbij er maar één per keer zichtbaar is, met buttons om te kiezen welk onderwerp wordt weergegeven.
Task list
Todo
Lijst met taken die zijn gemarkeerd als voltooid of onvoltooid.
Text input
Todo
Biedt de mogelijkheid om één regel aan tekens in te vullen.
Text input group
Todo
Textarea
Todo
Invoerveld voor het bewerken van meerdere regels tekst.
Toggletip
Todo
Een button die tijdelijke informatie toont en deze automatisch verbergt wanneer iets anders dan de button wordt gebruikt.
Unordered list
Community
Opsomming waar de volgorde van items in de lijst niet van belang is.
Video
Todo
Video met bedieningselementen voor afspelen, pauzeren, tekstalternatieven, en meer.