Ga naar hoofdinhoud

Componenten

De componenten van NL Design System worden met een estafette aanpak gemaakt en kunnen dus verschillende statussen hebben.

84 van 84 componenten zichtbaar

Schets van de Accordion component

Accordion

Help Wanted

Secties met de mogelijkheid om gerelateerde content te tonen en weer te verbergen.

Bekijk Accordion component

Schets van de Action group component

Action group

Help Wanted

Groepeert één of meer gerelateerde acties en verzorgt de lay-out van de content.

Bekijk Action group component

Schets van de Alert component

Alert

Todo

Trekt de aandacht naar een bericht dat informeert over een status.

Bekijk Alert component

Schets van de Alert dialog component

Alert dialog

Todo

Bekijk Alert dialog component

Schets van de Avatar component

Avatar

Todo

Toont een grafische weergave van een gebruiker, meestal in de vorm van een foto, illustratie, of initialen.

Bekijk Avatar component

Schets van de Blockquote component

Blockquote

Help Wanted

Toont een citaat dat afwijkt van de hoofdtekst.

Bekijk Blockquote component

Schets van de Breadcrumb navigation component

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.

Bekijk Breadcrumb navigation component

Schets van de Button component

Button

Help Wanted

Biedt de mogelijkheid om een actie uit te voeren.

Bekijk Button component

Leeg grid zonder component schets

Calendar

Todo

Toont een op maat gemaakte kalender die de mogelijkheid biedt om uit een beschikbare datum te kiezen.

Bekijk Calendar component

Schets van de Card as link component

Card as link

Todo

Bekijk Card as link component

Leeg grid zonder component schets

Case card

Help Wanted

Toont meta-informatie over een zaak en biedt de mogelijkheid hier naartoe te navigeren.

Bekijk Case card component

Schets van de Checkbox component
Schets van de Checkbox group component

Checkbox group

Todo

Biedt de mogelijkheid om geen, één of meerdere opties te selecteren uit een lijst.

Bekijk Checkbox group component

Schets van de Data badge component

Data badge

Todo

Toont een klein label dat de aandacht trekt en informeert bijvoorbeeld over een categorie.

Bekijk Data badge component

Schets van de Date input component

Date input

Todo

Biedt de mogelijkheid om een datum in te vullen of te kiezen uit een standaard ingebouwde kalender.

Bekijk Date input component

Schets van de Date input group component

Date input group

Todo

Biedt de mogelijkheid om een datum in te vullen die bekend of makkelijk op te zoeken is.

Bekijk Date input group component

Schets van de Date picker component

Date picker

Todo

Biedt de mogelijkheid om een beschikbare datum te kiezen uit een op maat gemaakte kalender.

Bekijk Date picker component

Leeg grid zonder component schets

Definition list

Todo

Toont een lijst aan termen en hun beschrijving, bijvoorbeeld een woordenlijst.

Bekijk Definition list component

Schets van de Dot badge component
Leeg grid zonder component schets
Schets van de Fieldset component

Fieldset

Todo

Groepeert gerelateerde formulier elementen.

Bekijk Fieldset component

Schets van de Figure component

Figure

Todo

Groepeert content zoals bijvoorbeeld een afbeelding, eventueel aangevuld met een bijschrift.

Bekijk Figure component

Schets van de File input component

File input

Todo

Biedt de mogelijkheid om één of meerdere bestanden te selecteren en te uploaden.

Bekijk File input component

Schets van de Form field component

Form field

Todo

Groepeert de verschillende onderdelen van een formulier element en kan gevalideerd worden.

Bekijk Form field component

Schets van de Form field checkbox option component

Form field checkbox option

Todo

Bekijk Form field checkbox option component

Schets van de Form field description component

Form field description

Help Wanted

Toont ondersteunende tekst en biedt extra context over de in te vullen informatie.

Bekijk Form field description component

Schets van de Form field error message component

Form field error message

Help Wanted

Toont een foutmelding die informeert wat er is fout gegaan en hoe dit is op te lossen.

Bekijk Form field error message component

Schets van de Form field label component

Form field label

Help Wanted

Toont een tekstlabel dat informeert over de in te vullen informatie.

Bekijk Form field label component

Schets van de Form field option label component

Form field option label

Todo

Bekijk Form field option label component

Schets van de Form field partial component

Form field partial

Todo

Bekijk Form field partial component

Schets van de Form field partial label component

Form field partial label

Todo

Bekijk Form field partial label component

Schets van de Form field radio option component

Form field radio option

Todo

Bekijk Form field radio option component

Schets van de Heading component

Heading

Help Wanted

Toont een titel en helpt de inhoud van een pagina te structureren.

Bekijk Heading component

Schets van de Heading 1 component

Heading 1

Todo

Toont de eerste titel van de pagina en helpt de inhoud van een pagina te structureren.

Bekijk Heading 1 component

Schets van de Heading 2 component

Heading 2

Todo

Toont de titel van een sectie en helpt de inhoud van een pagina te structureren.

Bekijk Heading 2 component

Schets van de Heading 3 component
Schets van de Heading 4 component
Schets van de Heading 5 component
Schets van de Heading 6 component
Leeg grid zonder component schets

Heading group

Todo

Toont een combinatie van een titel en ondersteunende tekst.

Bekijk Heading group component

Leeg grid zonder component schets
Schets van de Invalid form alert component

Invalid form alert

Todo

Bekijk Invalid form alert component

Leeg grid zonder component schets

Language navigation

Todo

Biedt de optie om een andere taal te selecteren.

Bekijk Language navigation component

Leeg grid zonder component schets
Schets van de Link component

Link

Help Wanted

Biedt de mogelijkheid om naar andere pagina's of secties te navigeren.

Bekijk Link component

Leeg grid zonder component schets

Link list

Todo

Toont een lijst aan gerelateerde links.

Bekijk Link list component

Schets van de Modal dialog component

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.

Bekijk Modal dialog component

Leeg grid zonder component schets

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.

Bekijk Navigation bar component

Schets van de Non modal dialog component

Non modal dialog

Todo

Bekijk Non modal dialog component

Schets van de Notification banner component

Notification banner

Todo

Bekijk Notification banner component

Leeg grid zonder component schets

Number badge

Help Wanted

Klein label dat de aandacht trekt informeert over een aantal.

Bekijk Number badge component

Schets van de Number input component

Number input

Todo

Biedt de mogelijkheid om een numerieke waarde in te vullen.

Bekijk Number input component

Schets van de Ordered list component

Ordered list

Help Wanted

Toont een lijst met items waarvan de volgorde betekenis heeft.

Bekijk Ordered list component

Schets van de Page footer component

Page footer

Todo

Bekijk Page footer component

Schets van de Page header component

Page header

Todo

Een plek bovenaan elke pagina voor een logo, navigatie en zoeken.

Bekijk Page header component

Schets van de Pagination component

Pagination

Todo

Bekijk Pagination component

Schets van de Paragraph component

Paragraph

Community

Toont een alinea aan tekst.

Bekijk Paragraph component

Schets van de Password input component

Password input

Todo

Afgeschermd invoerveld om een geheime tekst in te vullen, zoals een wachtwoord.

Bekijk Password input component

Leeg grid zonder component schets

Pre heading

Todo

Een ondersteunende tekst die boven een kop staat.

Bekijk Pre heading component

Schets van de Progress bar component

Progress bar

Todo

Toont de voortgang van een proces in een balk.

Bekijk Progress bar component

Leeg grid zonder component schets

Progress list

Todo

Toont de voortgang van een reeks stappen en biedt indien nodig extra details over een stap.

Bekijk Progress list component

Schets van de Radio button component

Radio button

Todo

Bekijk Radio button component

Schets van de Radio group component

Radio group

Todo

Biedt de mogelijkheid om één optie te selecteren uit een lijst.

Bekijk Radio group component

Schets van de Range component

Range

Todo

Toont een visuele indicatie van aanpasbare inhoud en biedt de mogelijkheid om een waarde binnen een vooraf ingesteld bereik te kiezen.

Bekijk Range component

Schets van de Rich text content component

Rich text content

Todo

Tekst met uitgebreide opmaakopties zoals links, koppen, lijsten en tabellen.

Bekijk Rich text content component

Schets van de Select component

Select

Todo

Biedt de mogelijkheid om één optie te selecteren uit een opgeklapte lijst.

Bekijk Select component

Schets van de Separator component

Separator

Todo

Toont een horizontale lijn om content te scheiden.

Bekijk Separator component

Schets van de Side navigation component

Side navigation

Todo

Toont een hiërarchische, verticale navigatie aan de zijkant van een pagina.

Bekijk Side navigation component

Schets van de Skip link component

Skip link

Help Wanted

Biedt de mogelijkheid om content over te slaan en direct naar een onderdeel binnen pagina te navigeren.

Bekijk Skip link component

Schets van de Spinner component

Spinner

Todo

Toont een animatie die aangeeft dat een pagina of een deel ervan aan het laden is, of een interactie blokkeert.

Bekijk Spinner component

Leeg grid zonder component schets

Status badge

Todo

Bekijk Status badge component

Schets van de Strong component

Strong

Todo

Toont tekst met sterke nadruk, meestal weergegeven in vetgedrukte vorm.

Bekijk Strong component

Leeg grid zonder component schets

Sub heading

Todo

Bekijk Sub heading component

Schets van de Summary list component

Summary list

Todo

Bekijk Summary list component

Schets van de Switch component

Switch

Todo

Invoerveld om een optie aan of uit te zetten.

Bekijk Switch component

Schets van de Table component

Table

Todo

Toont en organiseert data in gestructureerde rijen en kolommen.

Bekijk Table component

Schets van de Tabs component

Tabs

Todo

Biedt de mogelijkheid om tussen gerelateerde secties te navigeren, waarbij maar één sectie wordt weergegeven.

Bekijk Tabs component

Leeg grid zonder component schets

Task list

Todo

Toont een lijst met onvoltooide en voltooide taken.

Bekijk Task list component

Schets van de Text input component

Text input

Todo

Biedt de mogelijkheid om één regel aan tekens in te vullen.

Bekijk Text input component

Schets van de Text input group component

Text input group

Todo

Bekijk Text input group component

Schets van de Textarea component

Textarea

Todo

Biedt de mogelijkheid om meerdere regels aan tekens in te vullen.

Bekijk Textarea component

Schets van de Toggletip component
Schets van de Unordered list component

Unordered list

Help Wanted

Toont een lijst met items waarvan de volgorde geen betekenis heeft.

Bekijk Unordered list component

Schets van de Video component

Video

Todo

Toont video-inhoud en biedt de mogelijkheid om video’s te besturen, zoals het starten, pauzeren en stoppen.

Bekijk Video component