open-index/open-npm huggingface dataset:
npm package: @nl-rvo/autocomplete
Description: Autocomplete CSS component
Author: Community for NL Design System
Latest version: 1.5.0

# Autocomplete

In de autocomplete wordt een lijst met suggesties weergegeven tijdens het typen. Ook worder er links weergegeven die naar andere onderdelen van een website of applicatie verwijzen.

## Wanneer gebruik je een Autocomplete

De autocomplete wordt voornamelijk in een zoekveld gebruikt.

## Anatomie van een Autocomplete

Een Autocomplete bestaat uit:

- Een textfield
- Een textfield die een lijst toont tijdens het typen
- Lijst met suggesties
- Lijst met links
npm package: @nl-rvo/checkbox-filter
Description: Checkbox Filter CSS component
Author: Community for NL Design System
Latest version: 3.2.0

Dit component wordt voornamelijk gebruikt op een zoekpagina. De filters die je kun toepassen bij het zoeken kun je hierin verwerken door `options`. Met `optionsOnChange` kun je in je eigen applicatie bepalen hoe deze selectie afgehandeld moet worden. Je kan door middel van een input veld door de lijst filteren, dit is aan te zetten door de `showInputField` parameter. Vergeet dan niet de `inputFieldOnChange` ook mee te geven.
npm package: @nl-rvo/component-library-css
Description: Component library bundle for the RVO based on the NL Design System architecture
Author: Community for NL Design System
Latest version: 4.19.1

<!-- @license CC0-1.0 -->

# ROOS CSS Componenten

CSS-componenten worden ontwikkeld met behulp van BEM-classnamen en de stylesheets kunnen zonder bijwerkingen in je pagina worden opgenomen. Pas de classnamen toe op je elementen om ze stijlbaar te maken met behulp van designtokens.

## Installatie

```shell
npm install --save-dev --save-exact @nl-rvo/component-library-css
```

## Gebruik van de componenten

Je kunt kiezen om in één keer de hele library in te laden of alleen de componenten die je nodig hebt.

### Hele library laden

```html
<link rel="stylesheet" href="@nl-rvo/component-library-css/dist/index.min.css" />
```

### Individuele componenten laden

```html
<link rel="stylesheet" href="@nl-rvo/component-library-css/dist/components/accordion.min.css" />
```

## RVO theme class toevoegen

Als de Design Tokens, Components en Assets libraries zijn toegevoegd kun je het design system gebruiken door aan de root van je applicatie de CSS-class `rvo-theme` toe te voegen:

```html
<body class="rvo-theme"></body>
```

Let op: Laad je de componenten individueel in? Dan moet je ook de base.css inladen. Deze bevat modern-normalize.css en de .rvo-theme class.

```html
<link rel="stylesheet" href="@nl-rvo/component-library-css/dist/components/base.min.css" />
```

## CSS 'Components' gebruiken

Nu kunnen code snippets van componenten direct uit Storybook worden gekopieerd. Het hier gaat om puur CSS styling is er verder geen bindende javascript functionaliteit of manier om componenten te gebruiken. Je kunt dus zelf de componenten naar wens combineren en waar nodig javascript functionaliteit toevoegen. Let wel op dat je de principes van het design system intact houdt. Let erop dat je de benodigde componenten CSS inlaad als je werkt met de individuele component CSS bestanden in de package.
npm package: @nl-rvo/component-library-react
Description: React component library bundle for RVO based on the NL Design System architecture
Author: Community for NL Design System
Latest version: 7.0.3

<!-- @license CC0-1.0 -->

# ROOS React Components

ROOS voor React is een set van React componenten die eenvoudig te gebruiken zijn.
De componenten maken gebruikt van de ROOS design tokens en assets (fonts, icons, images). Deze moet je apart toevoegen aan je project.

## Installatie van React componenten

```shell
npm install --save-dev --save-exact @nl-rvo/component-library-react
```

De componenten kunnen in je React project worden gebruikt zoals hieronder:

```js
import { Button, Heading } from "@nl-rvo/component-library-react";

const Example = () => {
  return (
    <>
      <Heading>Home</Heading>
      <Button>Dit is een button</Button>
    </>
  );
};

export default Example;
```

## Installatie van ROOS huisstijl

De design tokens van ROOS passen de RVO huisstijl toe op de componenten. Deze kun je als volgt toevoegen aan je project:

- Installeer de NPM package

```shell
npm install --save-dev --save-exact @nl-rvo/design-tokens
```

- Importeer de design tokens in je React project

```js
import "@nl-rvo/design-tokens/dist/index.css";
```

- Gebruik de ThemeProvider op een niveau boven de React componenten.

```js
import { Button, Heading, ThemeProvider } from "@nl-rvo/component-library-react";

const Example = () => {
  return (
    <ThemeProvider>
      <Heading>Home</Heading>
      <Button>Dit is een button</Button>
    </ThemeProvider>
  );
};

export default Example;
```

## Gebruik van ROOS/Rijkshuisstijl lettertype, icons en images (assets)

Het lettertype, icons en images van ROOS/Rijkshuisstijl moet je apart toevoegen aan je React project.
Deze zitten omwille van licenties en gebruiksrechten niet in de NPM package.
Dit betekent dat de componenten zonder deze assets niet helemaal correct gestyled zijn.

### Aanvragen van assets

Wanneer je de huisstijl assets wil gebruiken kun je voor de package en toestemming contact opnemen met de huisstijl coördinator van RVO via [rijksbredehuisstijl@rvo.nl](mailto:rijksbredehuisstijl@rvo.nl).

### Installatie van assets

Wanneer je de assets-package hebt ontvangen, kun je deze toevoegen aan je React project.

```js
import "./fonts/index.css";
import "./icons/index.css";
import "./images/index.css";
```

De CSS bestanden bevatten design tokens voor de assets die door de componenten worden gebruikt.

## TypeScript

De TypeScript declarations voor de React componenten worden standaard meegeleverd.
npm package: @nl-rvo/counter-badge
Description: Counter badge CSS component
Author: Community for NL Design System
Latest version: 1.1.0

### Wanneer gebruik je het component

Het doel van de Counter badge is een getal te tonen en de gebruiker te informeren. Voorbeelding hiervan zijn bijvoorbeeld:

- Er zijn X aantal nieuwe meldingen
- Hoeveel filters er zijn geselecteerd

## Richtlijnen

- Als er meer dan 99 items zijn laat dan 99+ in plaats van het hele getal in verband met ruimte gebrek.
npm package: @nl-rvo/css-card
Description: Card CSS component
Author: Community for NL Design System
Latest version: 1.8.0

<!-- @license CC0-1.0 -->

Een card groepeert informatie die gerelateerd is aan elkaar. Over het algemeen is het mogelijk om via de card door te klikken naar meer informatie over het onderwerp.

# Wanneer gebruik je een card?

Je gebruikt een card wanneer je meerdere blokken met informatie moet tonen die gegroepeerd moeten worden. Denk bijvoorbeeld aan een overzicht van nieuwsberichten waarbij elk bericht een blok van gegroepeerde informatie is in een card.

Gebruik geen cards wanneer een lijst volstaat. Cards zijn slechter te scannen en gebruikers kunnen minder goed informatie vergelijken dan wanneer het in een lijst staat.

# Anatomie van het component

Het component bestaat minimaal uit:

- Een titel
- Een samenvatting

Mogelijke andere elementen binnen de card zijn:

- Een afbeelding
- Een button
- Aanduiding van het type
- Aanduiding van de datum

# Richtlijnen

- Een card bevat tussen 3 en 6 verschillende elementen
- Binnen een card staat het belangrijkste element bovenaan
- Als er als eerste een afbeelding getoond wordt moet het een duidelijke relatie hebben met de achterliggende content

# Rijkshuisstijl

Vanuit de Rijkshuisstijl zijn er geen richtlijnen wat betreft het card component.

# Bronnen

- [Cards: UI-Component Definition](https://web.archive.org/web/20220309101808/https://www.nngroup.com/articles/cards-component/)
- [How to design better cards - Kai Wong](https://uxdesign.cc/how-to-design-better-cards-2a5fa087b6c9)
npm package: @nl-rvo/css-card-experimental
Description: Card Experimental CSS component
Author: Community for NL Design System
Latest version: 0.3.0

<!-- @license CC0-1.0 -->

Een card groepeert informatie die gerelateerd is aan elkaar. Over het algemeen is het mogelijk om via de card door te klikken naar meer informatie over het onderwerp.

# Wanneer gebruik je een card?

Je gebruikt een card wanneer je meerdere blokken met informatie moet tonen die gegroepeerd moeten worden. Denk bijvoorbeeld aan een overzicht van nieuwsberichten waarbij elk bericht een blok van gegroepeerde informatie is in een card.

Gebruik geen cards wanneer een lijst volstaat. Cards zijn slechter te scannen en gebruikers kunnen minder goed informatie vergelijken dan wanneer het in een lijst staat.

# Anatomie van het component

Het component bestaat minimaal uit:

- Een titel
- Een samenvatting

Mogelijke andere elementen binnen de card zijn:

- Een afbeelding
- Een button
- Aanduiding van het type
- Aanduiding van de datum

# Richtlijnen

- Een card bevat tussen 3 en 6 verschillende elementen
- Binnen een card staat het belangrijkste element bovenaan
- Als er als eerste een afbeelding getoond wordt moet het een duidelijke relatie hebben met de achterliggende content

# Rijkshuisstijl

Vanuit de Rijkshuisstijl zijn er geen richtlijnen wat betreft het card component.

# Bronnen

- [Cards: UI-Component Definition](https://web.archive.org/web/20220309101808/https://www.nngroup.com/articles/cards-component/)
- [How to design better cards - Kai Wong](https://uxdesign.cc/how-to-design-better-cards-2a5fa087b6c9)
npm package: @nl-rvo/css-data-list
Description: Data-list CSS component
Author: Community for NL Design System
Latest version: 1.3.0

<!-- @license CC0-1.0 -->

Met de data list toon je verschillende waardes onder elkaar.

## Wanneer gebruik je een data list

Als je een overzichtelijke opsomming wil geven van data die bij elkaar hoort zoals n.a.w. gegevens.

## Anatomie van het component

Een data list bestaat uit:

- Het label.
- De waarde.

## Richtlijnen

- Maak of het label of de waarde bold afhankelijk wat belangrijker is voor de gebruiker/klant. Het is niet toegestaan om in dezelfde data list afwisselend het label of de waarde bold te maken.
npm package: @nl-rvo/css-footer
Description: Footer CSS component
Author: Community for NL Design System
Latest version: 1.10.0

# Footer

In de footer worden links geplaatst naar andere onderdelen van een website of applicatie.

## Wanneer gebruik je een Footer

Elke website of applicatie gebruikt een Footer op elke pagina.

## Anatomie van een Footer

Een Footer bestaat uit:

- Optionele lijsten met links
- Optionele pay-off
- Verplichte links waaronder aan de onderkant van de footer:
  - Contact: verwijst naar de algemene contactpagina op de website van RVO.
  - Privacy: verwijst naar de Privacy pagina op de website van RVO.
  - Cookies en anti-spam: verwijst naar de Cookies en anti-spam pagina op de website van RVO.
  - Toegankelijkheid: verwijst naar de specifieke eigen toegankelijkheidsverklaring van de website of applicatie.
  - Proclaimer: verwijst naar de Proclaimer pagina op de website van RVO.
  - Kwetsbaarheid melden: verwijst naar de kwetsbaarheid melden pagina op de website van RVO.
  - Webarchief: verwijst naar de archivering van de website of applicatie.

## Richtlijnen

- Een Footer moet elke pagina binnen de applicatie of website zichtbaar zijn.
- Een Footer moet altijd de verplichte links bevatten.
- Links die verwijzen naar een externe pagina worden geopend in een nieuw tabblad of venster.

## Rijkshuisstijl

Vanuit de Rijkshuisstijl zijn er geen voorschriften over hoe een Footer eruit moet zien of wat voor een links deze moet bevatten.
npm package: @nl-rvo/css-form-feedback
Description: Form feedback CSS component
Author: Community for NL Design System
Latest version: 1.4.0

## Richtlijnen

- Laat een waarschuwing zien als de gebruiker/klant wel verder kan in het proces maar dat de actie mogelijke gevolgen kan hebben.
- Laat een foutmelding zien als de gebruiker/klant niet verder kan in het proces totdat het probleem verholpen is.
npm package: @nl-rvo/css-form-field-label
Description: Form field label CSS component
Author: Community for NL Design System
Latest version: 1.4.0

Een label beschrijft het doel en de functionaliteit van het bijbehorende formulierveld.

## Wanneer gebruik je een label

Je gebruikt een label elke keer als je een formulierveld toont.

## Anatomie van het component

Een label bestaat uit:

- Labeltekst
- Indicator of het formulierveld verplicht is
- Indicator of het formulierveld niet verplicht is

## Richtlijnen

- Standaard wordt het default formaat gebruikt
- Voor labels van checkboxes en radio buttons wordt het small formaat gebruikt
- Een label staat altijd boven het formulierveld
- Geef aan of formulierveld verplicht ingevuld moet worden
- Wanneer het merendeel van de velden verplicht is hoeft dit niet expliciet aangegeven te worden. Er kan dan voor gekozen worden om optionele te kenmerken als zodanig

## Rijkshuisstijl

Dit component volgt de richtlijnen zoals deze zijn opgesteld door de Rijkshuisstijl.

## Bronnen

- [Simple is better - Making your web forms easy to use pays off](https://web.archive.org/web/20211122232910/https://ai.googleblog.com/2014/07/simple-is-better-making-your-web-forms.html)
- [Formuliervelden op de Rijkshuisstijl](https://web.archive.org/web/20190603044428/https://www.rijkshuisstijl.nl/basiselementen/basiselementen-online/online-componenten/formuliervelden)
- [Website Forms Usability: Top 10 Recommendations](https://web.archive.org/web/20210421051618/https://www.nngroup.com/articles/web-form-design/)
npm package: @nl-rvo/css-form-fieldset
Description: Form fieldset CSS component
Author: Community for NL Design System
Latest version: 1.5.0

## Richtlijnen

- Groepeer gerelateerde velden in een formulier om het formulier overzichtelijker en minder intimiderend te maken voor de gebruiker.
- Deel lange formulieren op in kleinere secties met een logisch aantal velden per groep.
- Gebruik grotere marges tussen verschillende groepen velden om de structuur van het formulier te benadrukken.
npm package: @nl-rvo/css-form-radio-button
Description: Form radio button CSS component
Author: Community for NL Design System
Latest version: 1.3.0

Een radio button zorgt ervoor dat een gebruiker een keuze kan maken uit verschillende opties.

## Wanneer gebruik je een radio button?

Wanneer een gebruiker een keuze moet maken uit verschillende opties en het mogelijk is om slechts één optie te kiezen.

## Anatomie van een radio button

Een radio button bestaat uit:

- Een radio button input
- Een label

## Richtlijnen

- Selecteer standaard een optie. Zo weet de gebruiker dat er een optie gekozen moet worden.
- Zorg ervoor dat de meest gebruikte optie standaard geselecteerd staat. Hierdoor hoeft een gebruiker niet extra te klikken.
- Vermijd horizontale radio buttons. Deze zijn lastig te scannen omdat het onduidelijk is welke input bij welk label hoort.
- Zorg ervoor dat zowel de input als de label aanklikbaar zijn. Omdat de input relatief klein is kan het voor sommige gebruikers lastig zijn deze aan te klikken.

## Rijkshuisstijl

De omlijning van de radio button is zwart in plaats van donkergrijs zoals staat opgenomen in de Rijkshuisstijl om deze visueel gelijk te houden met de andere input elementen.

## Bronnen

- [Radio Buttons: Select One by Default or Leave All Unselected? - Kara Pernice](https://web.archive.org/web/20220808214536/https://www.nngroup.com/articles/radio-buttons-default-selection/)
npm package: @nl-rvo/css-grid
Description: Grid CSS component
Author: Community for NL Design System
Latest version: 3.2.0

# Grid

Een grid wordt gebruikt om elementen naast elkaar te zetten in evenredige vlakken.

De grid begint in één kolom en schakelt naar de gekozen meerdere kolommen opties wanneer daar binnen de container genoeg ruimte voor is. Een kolom heeft altijd een minimale waarde van 276 pixels.

## Gebruik van kolom divisions anders dan '1fr' op alle kolommen

Standaard is de grid opgebouwd met kolommen van 1fr. Je kunt de kolommen in een grid echter zelf op verschillende manieren verdelen.

Bij gebruik als React component:

- De division prop is een string die de kolommen definieert. Deze string is een lijst van kolommen met een breedte in pixels of een percentage. Bijvoorbeeld: `2fr 1fr 2fr` of `200px 1fr 200px`.

Bij gebruik als CSS class:

- Gebruik de class 'rvo-layout-grid--division' en een style attribuut om de variabele '--grid-division' te zetten naar de gewenste string.
  Bijvoorbeeld: `<div class="rvo-layout-grid rvo-layout-grid--division" style="--grid-division: 2fr 1fr 2fr;">...</div>`
npm package: @nl-rvo/css-heading
Description: Heading CSS component
Author: Community for NL Design System
Latest version: 2.2.0

# Heading

## Wanneer gebruik je een heading?

Je gebruikt een heading om duidelijk te maken dat het om een koptekst gaat. De content van dit component wordt altijd bepaald door het te wrappen in de `h-element`. Hieronder een aantal voorbeelden als je de CSS package gebruikt en als je de React Package gebruikt

### CSS

Als je de CSS classes gaat toepassen dan moeten alle classes gebruikt worden op het h-element. De volgende classes zijn aanwezig:

- utrecht-heading-(number 1 - 6)
- rvo-heading
- rvo-heading--margin-(number 1 - 6) | Als je margin wilt toepassen. Nummer moet gelijk zijn aan het h-element dat gebruikt wordt.
- rvo-heading--normal | Als de font-weight normal moet zijn.

Als de content van een heading uit meerdere items bestaat, dan deze classes toepassen om ruimte tussen elementen te geven.

- rvo-heading--gap-sm | Als je h1 of h2 gebruikt, deze class toepassen.
- rvo-heading--gap-xs | Bij de overige h-elementen deze class toepassen.

### React

Import als gebruikelijk en wrap de inhoud in de `<Heading>`-tags.

#### Iconen gebruiken

Heading ondersteund ook het gebruik van het `<Icon>` component dat aangeboden wordt in ROOS. Als je een icoon toepast dan wordt de kleur en size al bepaald door de CSS, dus deze hoef je niet te declareren als parameters voor het icoon.

## Richtlijnen

- Gebruik maximaal één h1.
- Zorg ervoor dat de tekst in de heading duidelijk aangeeft waar de pagina of onderstaande tekst over gaat.
- Bij het gebruik van een heading met zowel dikgedrukte als normale tekst kun je de class `utrecht-heading--mixed` gebruiken. Deze class zorgt ervoor dat de heading standaard niet dikgedrukt is zodat je delen van de tekst dikgedrukt kunt maken met `<strong>` elementen.
- Sla geen heading niveau’s over. Na een of meerdere H2’s komen een of meerdere H3’s. Na een of meerdere H3’s komen een of meerdere H4’s, etc.
npm package: @nl-rvo/css-hero
Description: Hero CSS component
Author: Community for NL Design System
Latest version: 1.7.1

Het Hero component wordt altijd bovenaan een pagina geplaatst.
De afbeelding is verplicht en kan worden aangeleverd als een afbeeldingsobject `{ src, alt }` of als een HTML`<img />` element.
Bij gebruik van een afbeeldingsobject kunnen optioneel extra instellingen worden meegegeven, zoals `loading`, `decoding`, `fetchPriority`, `width` en `height`.
npm package: @nl-rvo/css-icon
Description: Icon CSS component
Author: Community for NL Design System
Latest version: 1.4.0

Regels:

- Gebruik geen iconen zonder een helder label.
- Het icoon voor 'Verwijderen' moet altijd een prullenbakje zijn.
- Het icoon voor 'Toevoegen' moet altijd een + icoon zijn.
npm package: @nl-rvo/css-image
Description: Image CSS component
Author: Community for NL Design System
Latest version: 1.2.0

# Image component

Een toegankelijke, responsieve afbeeldingcomponent voor het NL Design System. En het tonen van een afbeelding op een duurzame en toegankelijke manier.

De **Image** component toont afbeeldingen op een consistente en toegankelijke manier, met optionele bijschriften, afgeronde hoeken op basis van design tokens en ondersteuning voor responsieve `<picture>`-bronnen.  
Gebruik deze component voor contentafbeeldingen, hero-secties of illustraties die onderdeel zijn van de inhoudsstructuur.

---

## Kenmerken

- Responsief: ondersteunt `<picture>` met meerdere bronformaten.
- Toegankelijk: vereist `alt`-tekst en ondersteunt `caption` via `<figure>` en `<figcaption>`.
- Design tokens: radius-groottes en spacing volgen het tokensysteem.
- Prestatiegericht: optionele ondersteuning voor `loading`, `decoding` en `fetchPriority`.
- Herbruikbaar: geschikt voor gebruik binnen elk project als zelfstandige React-component.

## Richtlijnen

- Gebruik bij voorkeur het WebP-bestandsformaat voor afbeeldingen die zijn opgebouwd uit pixels, zoals foto's, screenshots en complexe afbeeldingen. Als het niet mogelijk is om WebP te gebruiken, hanteer dan het JPG- of PNG-formaat.
- Gebruik het SVG-bestandsformaat voor afbeeldingen die zijn opgebouwd uit geometrische vormen (vectorafbeeldingen), zoals logo's, iconen, illustraties, grafieken en diagrammen.
- Laad een afbeelding in met de juiste grootte. Bijvoorbeeld: als de container een maximale breedte heeft van 1280 pixels, zorg er dan voor dat de afbeelding ook met een breedte van 1280 pixels, en niet groter, wordt ingeladen.
- Bied waar mogelijk meerdere variaties van een afbeelding aan om retinaschermen te ondersteunen.
- Stel de kwaliteit van rasterafbeeldingen (WebP, JPG en PNG) in op maximaal 85 procent. Dit maakt de bestandsgrootte kleiner, want alles boven 85 procent is voor het menselijk oog niet zichtbaar.
- Geef elke afbeelding die belangrijk is om de inhoud te begrijpen een alt-tekst mee die de inhoud van de afbeelding duidelijk omschrijft voor gebruikers die een schermlezer gebruiken.
- Als een afbeelding enkel decoratief is, geef de afbeelding wel een alt-attribuut mee, maar laat deze leeg.

## Wanneer gebruik je image

Als er een afbeelding getoond moet worden.
npm package: @nl-rvo/css-link
Description: Link CSS component
Author: Community for NL Design System
Latest version: 1.5.0

# Link

## Wanneer gebruik je het component

Gebruik een link om naar een andere pagina of een andere locatie binnen dezelfde pagina te verwijzen.

## Anatomie van een link

Een link bestaat uit:

- Linktekst
- Icoon (niet verplicht)

## Richtlijnen

- Een link gebruik je om te verwijzen naar een andere pagina. Om een actie uit laten te voeren gebruik je het Button component.
- Voorzie links naar websites of applicaties die niet van RVO zijn altijd van externe link icoon. Bijvoorbeeld: een link van de RVO website naar de Kamer van Koophandel krijgt een externe link icoon. Een link van de RVO website naar mijn.rvo.nl krijgt geen externe link icoon.
- Standaard heeft een link een underline. Deze is voornamelijk handig in lopende tekst waar er duidelijk onderscheid gemaakt moet worden tussen dik gedrukte tekst en een link.
- Links in menu items of met een icoon hoeven geen underline te hebben omdat er vanuit de context herleid kan worden dat het om een link gaat.
- Gebruik de `rvo-link--full-container` class om het klikgebied van de link te vergroten tot de eerste container met `position: relative`.
npm package: @nl-rvo/css-loader
Description: Loader CSS component
Author: Community for NL Design System
Latest version: 2.1.0

De Loader kan men gebruiken om een tijdelijk laadscherm te tonen als het ophalen van de informatie een korte tijd bedraagd, of het laden van een pagina.
Standaard is de loader leeg met alleen een draaiend icoon. Als je de loader over de gehele pagina wil laden vallen, of over een specieke div, maak dan gebruik van `overlay`. De Loader zal binnen het element vallen als `position: relative;` wordt gebruikt.

Als na enige tijd het laden nog te lang duurt, kun je een status bericht tonen of twee action buttons tonen. Dit zijn allemaal optionele parameters.

- Toon altijd een 'loader' bij belangrijke 'verzend'-momenten.
- Informeer de gebruiker tijdens het tonen van de 'loader' wat er gebeurt.
- Duurt het laden langer dan 30 seconden laat dan een foutmelding zien en een knop om het opnieuw te proberen.
npm package: @nl-rvo/css-max-width-layout
Description: Max-width layout CSS component
Author: Community for NL Design System
Latest version: 1.3.0

De max width layout component kadert een vlak af wanneer een bepaalde breedte bereikt wordt.

## Wanneer gebruik je max width layout

Wanneer je content hebt die niet over de gehele breedte van het scherm getoond mag worden.

## Anatomie van het component

Het component bestaat uit:

- Container

## Richtlijnen

- Content moet leesbaar blijven en een regel tekst moet daarom tussen de 75 en 100 tekens bevatten. Een max width container kan helpen om de content af te kaderen.

## Rijkshuisstijl

Er zijn geen richtlijnen vanuit de Rijkshuisstijl betreffende de maximale breedte van content.

## Bronnen

- [Readability: The Optimal Line Length - Baymard Institute](https://web.archive.org/web/20220606133257/https://baymard.com/blog/line-length-readability)
npm package: @nl-rvo/css-menubar-mobile
Description: Menubar mobile CSS component
Author: Community for NL Design System
Latest version: 1.7.0

Richtlijnen:

- Zet altijd als laatste een knop 'uitloggen' in de mobile Menubar.
- Zorg ervoor dat een gebruiker altijd naar de sluit knop kan navigeren met het keyboard wanneer het menu geopend is.
npm package: @nl-rvo/css-page-number-navigation
Description: Page Number Navigation CSS component
Author: Community for NL Design System
Latest version: 1.5.1

## Richtlijnen

- Lijn de pagination altijd links uit met de bovenstaande content waarvoor de pagination actief is. Dit zorgt ervoor dat mensen met kokervisie de pagination makkelijk kunnen ontdekken.
- Gebruik ellipsen (…) om eventuele overgeslagen pagina's te vervangen. Bijvoorbeeld:

[1] 2 … 10

1 [2] 3 … 100

1 2 [3] 4 … 100

1 2 3 [4] 5 … 100

1 … 4 [5] 6 … 100

1 … 97 [98] 99 100

1 … 98 [99] 100

1 … 99 [100]

## Voor ontwikkelaars

De logica voor het genereren van paginanummers met ellipsen kan als volgt worden geïmplementeerd.

```js
const generatePageNumberMarkup = (page, activePage) => {
  return page === activePage ? `[${page}]` : `${page}`;
};

const generateEllipsisMarkup = () => "…";

const generatePageNumbers = (totalPages, activePage) => {
  const pages = [];
  const windowSize = 5;

  const addRange = (from, to) => {
    for (let i = from; i <= to; i++) {
      pages.push(generatePageNumberMarkup(i, activePage));
    }
  };

  // Toon alle pagina's als het totaal klein is
  if (totalPages <= windowSize) {
    addRange(1, totalPages);
    return pages;
  }

  // Begin van de paginering
  // Voorbeeld: [1] 2 3 4 5 … 100
  if (activePage <= 4) {
    addRange(1, 5);
    pages.push(generateEllipsisMarkup());
    pages.push(generatePageNumberMarkup(totalPages, activePage));
    return pages;
  }

  // Einde van de paginering
  // Voorbeeld: 1 … 96 97 98 [99] 100
  if (activePage >= totalPages - 3) {
    pages.push(generatePageNumberMarkup(1, activePage));
    pages.push(generateEllipsisMarkup());
    addRange(totalPages - 4, totalPages);
    return pages;
  }

  // Midden van de paginering
  // Voorbeeld: 1 … 4 [5] 6 … 100
  pages.push(generatePageNumberMarkup(1, activePage));
  pages.push(generateEllipsisMarkup());
  addRange(activePage - 1, activePage + 1);
  pages.push(generateEllipsisMarkup());
  pages.push(generatePageNumberMarkup(totalPages, activePage));

  return pages;
};

generatePageNumbers(100, 1);
```
npm package: @nl-rvo/css-pagination
Description: Pagination CSS component
Author: Community for NL Design System
Latest version: 1.2.1

## Richtlijnen

- Lijn de pagination altijd links uit met de bovenstaande content waarvoor de pagination actief is. Dit zorgt ervoor dat mensen met kokervisie de pagination makkelijk kunnen ontdekken.
- Gebruik ellipsen (…) om eventuele overgeslagen pagina's te vervangen. Bijvoorbeeld:

[1] 2 … 10

1 [2] 3 … 100

1 2 [3] 4 … 100

1 2 3 [4] 5 … 100

1 … 4 [5] 6 … 100

1 … 97 [98] 99 100

1 … 98 [99] 100

1 … 99 [100]

## Voor ontwikkelaars

De functie voor deze logica kan als volgt worden geschreven:

```js
const generatePageNumberMarkup = () => "";
const generateEllipsisMarkup = () => "";

const generatePageNumbers = (totalPages, activePage) => {
  const pages = [];

  // Always add the first page
  pages.push(generatePageNumberMarkup(1, activePage));

  // Add ellipses if the active page is more than 4
  if (activePage > 4) {
    pages.push(generateEllipsisMarkup());
  }
  if (activePage === 4) {
    pages.push(generatePageNumberMarkup(2, activePage));
  }

  // Add the page before the active page if it's more than 2
  if (activePage > 2) {
    pages.push(generatePageNumberMarkup(activePage - 1, activePage));
  }

  // Add the active page if it's not the first or last page
  if (activePage > 1 && activePage < totalPages) {
    pages.push(generatePageNumberMarkup(activePage, activePage));
  }

  // Add the page after the active page if it's less than total pages minus 1 and not the last page
  if (activePage < totalPages - 1 && activePage !== totalPages - 2) {
    pages.push(generatePageNumberMarkup(activePage + 1, activePage));
  }

  // Add ellipses if the active page is less than the total pages minus 3
  if (activePage < totalPages - 3) {
    pages.push(generateEllipsisMarkup());
  }

  // Add the second last page if the active page is less than the total pages minus 1 and greater than or equal to total pages minus 3
  if (activePage < totalPages - 1 && activePage >= totalPages - 3) {
    pages.push(generatePageNumberMarkup(totalPages - 1, activePage));
  }

  // Always add the last page
  if (totalPages !== 1) {
    pages.push(generatePageNumberMarkup(totalPages, activePage));
  }

  return pages;
};

generatePageNumbers(5, 30);
```
npm package: @nl-rvo/css-paragraph
Description: Paragraph CSS component
Author: Community for NL Design System
Latest version: 1.5.0

# Paragraph

## Wanneer gebruik je een paragraph?

Je gebruikt de paragraph om een stuk tekst te tonen in een bepaalde stijl.

## Richtlijnen

- De standaard tekstparagraaf is 16 pixels groot.
- De lg size variant van 18 pixels kan gebruikt worden voor een grotere introtekst.
- De sm size variant van 14 pixels kan gebruikt worden voor tekst die minder hoeft op te vallen.
npm package: @nl-rvo/css-table
Description: Table CSS component
Author: Community for NL Design System
Latest version: 1.9.0

Met tabellen toon en organiseer je data in rijen en kolommen.

## Wanneer gebruik je een tabel?

Je gebruikt een tabel wanneer er data getoond wordt die vergeleken met elkaar moet kunnen worden.

## Anatomie

Een tabel bestaat uit:

1. Caption: deze beschrijft de inhoud van de tabel.
2. Table header: deze bevat de titel van de kolom.
3. Table cell: bevat data.
4. Table column: bevat een verticale representatie van tabel cellen.
5. Table row: bevat een horizontale representatie van tabel cellen.

## Richtlijnen

- Een tabel toont altijd een collectie tonen van gestructureerde data.
- Plaats een duidelijke en logische header boven een kolom.
- Gebruik een caption om de tabel te beschrijven.
- Kolommen worden getoond op volgorde van belangrijkheid waarbij de belangrijkste kolom als eerst geplaatst wordt.
- Zorg ervoor dat de context altijd bewaard blijft door gebruik te maken van headers die vast geplakt blijven wanneer de gebruiker naar beneden scrolt.
- Spreek menselijke taal: laat alleen relevante kolommen zien die waarde hebben. Dus geen nietszeggende referentienummers.
- Maak de tabel horizontaal scrolbaar wanneer er onvoldoende ruimte is op het scherm om de tabel volledig te tonen.
- Lijn data in tabelcellen aan de bovenkant uit om de scanbaarheid te vergroten.
- Verander de layout niet wanneer tabellen op een kleiner scherm getoond moet worden. Hierdoor verdwijnt de onderliggende semantiek van de tabel.
- Lijn tekst altijd links uit.
- Lijn getallen die een grootte vertegenwoordigen (bijvoorbeeld een geldbedrag of aantal inwoners) altijd rechts uit zodat deze beter te vergelijken zijn met andere data in dezelfde rij.
- Gebruik een monospaced font voor getallen zodat elk cijfers dezelfde ruimte innemen. Hierdoor zijn getallen die onder elkaar staan makkelijker te vergelijken.
- Lijn de header van de kolom hetzelfde uit als de data die eronder staat. Als de data rechts uitgelijnd staat, zorg er dan voor dat de header ook rechts uitgelijnd staat.
- Hou als richtlijn aan dat een rij maximaal 3 regels hoog mag zijn.
- Kader data af met een ellipsis wanneer deze te groot is om op 2 regels te passen.
- Headers starten met een hoofdletter en eindigen niet met een komma, puntkomma of punt.
- Neem meeteenheden (zoals € or m2) op in de table header. Dan hoeft dat niet telkens in de kolom. **Prijs (€)**
- Tekst in een cell begint met een hoofdletter
- Data in een cell bevat geen meeteenheid. Die zet je in de header.
- Wees consistent in het gebruik van decimalen.
- De sortering wordt toegepast op alle items en over alle pagina’s als er paginering is
- Kolommen die gesorteerd kunnen worden hebben een sorteer icoon.

## Rijkshuisstijl

De Rijkshuisstijl kent geen specifieke voorschriften wat betreft tabellen.

## Bronnen

- [Data Tables](https://web.archive.org/web/20220315222659/https://inclusive-components.design/data-tables/)
- [Designing Mobile Tables - Steven Hoober](https://web.archive.org/web/20211221193450/https://www.uxmatters.com/mt/archives/2020/07/designing-mobile-tables.php)
npm package: @nl-rvo/css-tabs
Description: Tabs CSS component
Author: Community for NL Design System
Latest version: 1.3.0

# Tabs

Met tabs kunnen gebruikers navigeren tussen verschillende secties content die gerelateerd zijn aan elkaar waar bij telkens één gekozen sectie wordt getoond. Hierbij blijft de gebruiker op dezelfde pagina zonder dat deze wordt herladen.

## Wanneer gebruik je tabs

Als je gebruikers snel wil laten schakelen tussen verschillende content secties met gerelateerde content op dezelfde pagina.

## Anatomie van het component

Het component bestaat uit:

- Titel van een tab
- Inhoud van een tab

## Richtlijnen

- Gebruik tabs alleen als de content logisch op te delen is in duidelijk gelabelde secties.
- Zorg dat de eerste tab het meest relevant is voor de meeste gebruikers.
- Gebruik tabs niet als gebruikers alle content in één keer moeten kunnen zien, lezen of vergelijken.
- Gebruik tabs niet als de totale hoeveelheid content de pagina traag maakt om te laden.
- Gebruik tabs niet als vervanging van paginanavigatie.
- Test eerst of de content zonder tabs duidelijk is. Overweeg of het beter is om de content te versimpelen, over meerdere pagina’s te verdelen, op één pagina te houden met kopjes, of een inhoudsopgave te gebruiken.
- Gebruik tabs als gebruikers niet meer dan één sectie tegelijk hoeven te zien en snel willen wisselen.

## Rijkshuisstijl

De Rijkshuisstijl heeft geen specifieke eisen of richtlijnen wat betreft tabs.

## Bronnen

- [Tabs - GOV.UK Design System](https://web.archive.org/web/20240830090226/https://design-system.service.gov.uk/components/tabs/)
npm package: @nl-rvo/expandable-table
Description: Expandable Table component
Author: Community for NL Design System
Latest version: 1.3.0

Deze Table biedt de mogelijkheid uitklapbare rijen toe te voegen waar extra informatie die niet in de helper
text passen te kunnen tonen. De table kan overigens ook gebruikt worden als een normale tabel zonder rijen met extra
informatie.
npm package: @nl-rvo/skeleton
Description: Skeleton component
Author: Community for NL Design System
Latest version: 1.1.0

De Skeleton is volgens de [Atomic Design Methodology](https://atomicdesign.bradfrost.com/chapter-2/) het kleinst
mogelijke bouwblok. Dit bouwblok dient daarom gebruikt te worden bij het maken van complexere componenten. Een
mogelijk component waarbij de Skeleton gebruikt kan worden is een skeleton loader. Deze loader kan vervolgens
getoond worden bij asynchrone operaties waarbij nieuwe informatie word opgehaald.