Componenten
De componenten van NL Design System worden met een estafette aanpak gemaakt en kunnen dus verschillende statussen hebben.
89 van 89 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
Community
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
Help Wanted
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
Help Wanted
Een kalender waarin je een beschikbare datum kan kiezen.
Card as Link
Help Wanted
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
Help Wanted
Invoerveld voor het kiezen van een optie uit een groep van opties, of om te kiezen tussen "wel" of "niet".
Checkbox Group
Help Wanted
Biedt de mogelijkheid om geen, één of meerdere opties te selecteren uit een lijst.
Code
Candidate
Computercode die onderdeel is van lopende tekst.
Code Block
Candidate
Blok met één of meerdere regels computercode.
Color Sample
Candidate
Toont een voorbeeld van een kleur.
Data Badge
Candidate
Label met extra informatie, zoals een categorie of een eigenschap.
Data Summary
Help Wanted
Lijst met eigenschappen en bijbehorende data over een onderwerp.
Date Input
Help Wanted
Invoerveld om een datum in te vullen met de mogelijkheden die de browser biedt.
Date Input Group
Help Wanted
Formulierveld voor een datum die de gebruiker al weet of die van bekende gegevens overgenomen kan worden.
Date Picker
Help Wanted
Invoerveld om een beschikbare datum te kiezen via een op maat gemaakte kalender.
Description List
Help Wanted
Toont een lijst aan termen en hun beschrijving, bijvoorbeeld een woordenlijst.
Dot Badge
Help Wanted
Stip bij een Link of Button die zonder zichtbaar label de aandacht trekt bij een statuswijziging.
Drawer
Help Wanted
Een paneel aan de zijkant van een scherm, die geopend kan worden voor gerelateerde informatie, formulieren of acties.
Fieldset
Help Wanted
Groep van gerelateerde formuliervelden.
Figure
Help Wanted
Zelfstandige inhoud, zoals een afbeelding, met mogelijk een verklarende tekst.
File Input
Help Wanted
Knop om één of meerdere bestanden te kiezen en te uploaden.
Form Field
Help Wanted
Een invoerveld en bijbehorende onderdelen die helpen bij het invullen.
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 Navigation
Help Wanted
Overzicht van stappen in een formulier, met de mogelijkheid om direct naar beschikbare stappen te navigeren.
Form Summary
Help Wanted
Overzicht van ingevoerde data in een formulier.
Heading
Candidate
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
Community
Combinatie van een koptekst en ondersteunende tekst.
Icon
Help Wanted
Grafisch symbool dat visueel informatie geeft over een actie, onderwerp of status.
Image
Help Wanted
Toont een afbeelding
Input Group
Help Wanted
Formulierveld waarmee je een waarde kunt bewerken in een groep van meerdere invoervelden.
Invalid Form Alert
Todo
Trekt de aandacht naar een overzicht van foutmeldingen.
Language Navigation
Help Wanted
Eén of meerdere links om de website te openen in een andere taal.
Link
Candidate
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.
Logo
Help Wanted
Afbeelding met het beeldmerk of woordmerk van een organisatie.
Mark
Candidate
Markeert tekst, zodat je ernaar kan verwijzen vanuit een andere context of omdat de tekst relevant is voor de huidige activiteit.
Modal Dialog
Help Wanted
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
Toont een venster over de pagina om de aandacht op een enkele taak of bericht te vestigen. Interactie met onderliggende pagina blijft mogelijk.
Notification Banner
Help Wanted
Toont een informerend bericht dat niet direct is gerelateerd aan de inhoud van een pagina.
Number Badge
Candidate
Toont een klein label dat de aandacht trekt en informeert over een aantal.
Number Input
Help Wanted
Invoerveld voor een heel getal of een getal met decimalen.
Ordered List
Community
Lijst waarvan de volgorde van items betekenis heeft.
Page Footer
Help Wanted
Consistente plek onderaan elke pagina, vaak met links, juridische informatie en opties om hulp te krijgen of contact op te nemen.
Page Header
Help Wanted
Consistente plek bovenaan elke pagina, vaak met een logo, navigatie en zoekfunctie.
Page Number Navigation
Help Wanted
Navigatie naar andere pagina's wanneer een grote hoeveelheid informatie is verdeeld over genummerde pagina's.
Paragraph
Candidate
Toont een alinea aan tekst.
Password Input
Help Wanted
Afgeschermd invoerveld om een geheime tekst in te vullen, zoals een wachtwoord.
Progress Bar
Help Wanted
Toont de voortgang van een proces in een balk.
Progress Circle
Help Wanted
Toont de voortgang van een bepaald proces in de vorm van een cirkel.
Progress List
Help Wanted
Toont de voortgang van een reeks stappen en biedt indien nodig extra details over een stap.
Radio Button
Help Wanted
Invoerveld voor het kiezen van een enkele optie uit een groep van opties.
Radio Group
Help Wanted
Biedt de mogelijkheid om één optie te selecteren uit een lijst.
Range
Help Wanted
Invoerveld voor een getal dat je bij benadering kunt kiezen door te schuiven tussen een minimum en maximum.
Rich Text Content
Help Wanted
Tekst met uitgebreide opmaakopties zoals links, koppen, lijsten en tabellen.
Select
Community
Biedt de mogelijkheid om één optie te selecteren uit een opgeklapte lijst.
Separator
Community
Markering van de plek waar de tekst op een nieuwe manier verdergaat, zoals een nieuwe scène of een ander onderwerp.
Side Navigation
Help Wanted
Verticale navigatie die de mogelijkheid biedt om tussen pagina's te navigeren.
Skip Link
Candidate
Verborgen mogelijkheid om snel naar een ander deel van de pagina te navigeren zonder gebruik te maken van een muis of touchscreen.
Spinner
Help Wanted
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
Help Wanted
Label dat informeert over een status en de aandacht trekt met een signaalkleur.
Strong
Help Wanted
Korte belangrijke tekst die vetgedrukt wordt weergegeven.
Subscript
Help Wanted
Toont tekst met een kleiner lettertype met een verlaagde letterlijn.
Superscript
Help Wanted
Toont tekst met een kleiner lettertype met een verhoogde letterlijn.
Switch
Help Wanted
Invoerveld om een optie aan of uit te zetten, waarbij de actie direct wordt doorgevoerd.
Table
Help Wanted
Structureert data in rijen en kolommen.
Tabs
Help Wanted
Paneel om onderwerpen te groeperen, waarbij er maar één per keer zichtbaar is, met buttons om te kiezen welk onderwerp wordt weergegeven.
Task List
Help Wanted
Lijst met taken die zijn gemarkeerd als voltooid of onvoltooid.
Text Input
Community
Biedt de mogelijkheid om één regel aan tekens in te vullen.
Text Area
Help Wanted
Invoerveld voor het bewerken van meerdere regels tekst.
Toggletip
Help Wanted
Een knop die tijdelijke informatie toont en deze automatisch verbergt wanneer iets anders dan de knop wordt gebruikt.
Unordered List
Community
Opsomming waar de volgorde van items in de lijst niet van belang is.
Video
Help Wanted
Video met bedieningselementen voor afspelen, pauzeren, tekstalternatieven, en meer.
YouTube Video
Help Wanted
YouTube-video met de bedieningselementen die YouTube zelf biedt.