Componenten Overzicht
De componenten van NL Design System worden met een estafette aanpak gemaakt en kunnen dus verschillende statussen hebben.
0 van 0 zichtbaar
Accordion
Community
Secties met de mogelijkheid om gerelateerde content te tonen en weer te verbergen.
Action Group
Community
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
Help Wanted
Opent een venster waarin de gebruiker een actie moet uitvoeren om verder te gaan. De rest van de pagina is tijdelijk geblokkeerd.
Avatar
Community
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
Candidate
Biedt de mogelijkheid om een actie uit te voeren.
Calendar
Help Wanted
Een kalender waarin je een beschikbare datum kan kiezen.
Card as Link
Community
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
Community
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.
Contact Timeline
Help Wanted
Toont een chronologische lijst van contactmomenten, met de mogelijkheid om aanvullende details per contactmoment te bekijken.
Customizable Text Input
Help Wanted
Uitbreiding voor iconen, knoppen of tekst aan het begin of einde van een invoerveld.
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
Community
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
Community
Toont een lijst aan termen en hun beschrijving, bijvoorbeeld een woordenlijst.
Dialog
Help Wanted
Toont een venster over de pagina om de aandacht op een enkele taak of bericht te vestigen. Interactie met onderliggende pagina blijft mogelijk.
Dot Badge
Community
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
Community
Groep van gerelateerde formuliervelden.
Figure
Community
Zelfstandige inhoud, zoals een afbeelding, met mogelijk een verklarende tekst.
File
Community
Toont meta-informatie over een bestand en biedt één of meer acties, zoals bekijken, downloaden of verwijderen.
File Input
Community
Knop om één of meerdere bestanden te kiezen en te uploaden.
Form Field
Community
Een invoerveld en bijbehorende onderdelen die helpen bij het invullen.
Form Field Description
Candidate
Extra tekst bij een invoerveld die helpt bij het invullen van een formulier door een beschrijving, instructies of suggesties.
Form Field Error Message
Candidate
Foutmelding bij een invoerveld die informeert wat de fout is en wat de oplossing is.
Form Field Label
Community
Tekst bij een invoerveld die vraagt om bepaalde informatie, of een korte omschrijving van een optie om te kiezen.
Form Field Label Suffix
Help Wanted
Toont een tekstlabel dat aangeeft dat de in te vullen informatie wel of niet verplicht is.
Form Field Status
Help Wanted
Statusmelding bij een onderdeel van een formulier die feedback geeft over wat er goed of fout gaat, eventueel met een actie.
Form Navigation
Help Wanted
Overzicht van stappen in een formulier, met de mogelijkheid om direct naar beschikbare stappen te navigeren.
Form Summary
Community
Overzicht van ingevoerde data in een formulier.
Grid
Help Wanted
Verdeelt content in rijen en kolommen voor een consistente en overzichtelijke layout.
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
Community
Grafisch symbool dat visueel informatie geeft over een actie, onderwerp of status.
Image
Community
Toont een afbeelding
Input Group
Help Wanted
Formulierveld waarmee je een waarde kunt bewerken in een groep van meerdere invoervelden.
Language Navigation
Help Wanted
Eén of meerdere links om de website te openen in een andere taal.
Link
Candidate
Een verwijzing om een externe bron of bestand te openen of te navigeren binnen dezelfde pagina of website.
Link List
Community
Een lijst met gerelateerde links naar andere pagina’s of websites.
Login Link
Community
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
Community
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.
Note
Community
Visueel ondersteunend element dat de aandacht vestigt op aanvullende of belangrijke informatie.
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 Body
Community
De hoofdinhoud en eventuele aanvullende informatie.
Page Footer
Community
Consistente plek onderaan elke pagina, vaak met links, juridische informatie en opties om hulp te krijgen of contact op te nemen.
Page Header
Community
Consistente plek bovenaan elke pagina, vaak met een logo, navigatie en zoekfunctie.
Page Layout
Community
Indeling voor de inhoud van de pagina en consistent aanwezige onderdelen, zoals de Page Header, navigatie en Page Footer.
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
Community
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.
Pull Quote
Help Wanted
Illustratie met een citaat uit de hoofdtekst.
Radio Button
Community
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.
Root
Community
Onderlaag waarin basiskeuzes worden gemaakt voor alle componenten die in de website zitten.
Select
Community
Biedt de mogelijkheid om één optie te selecteren uit een opgeklapte lijst.
Select Combobox
Help Wanted
Biedt de mogelijkheid om één optie te selecteren, waarbij de getoonde opties kunnen worden gefilterd door tekst in een invoerveld in te voeren.
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
Community
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
Community
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
Community
Invoerveld om een optie aan of uit te zetten, waarbij de actie direct wordt doorgevoerd.
Table
Community
Structureert data in rijen en kolommen.
Tabs
Community
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.
Task Navigation
Community
Overzicht van één of meerdere taken die aandacht nodig hebben, met een link om de taak uit te voeren.
Text Area
Community
Invoerveld voor het bewerken van meerdere regels tekst.
Text Input
Community
Invoerveld voor het bewerken van één regel 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.