De page-container component biedt een basis container-element van het Dictu
Design Systeem.

Gebruik deze component

Je kunt de CSS zo in je project installeren:

``console npm install --save-dev @dictu/page-container`

Je kunt de CSS uit node_modules/ importeren:

`html rel="stylesheet" href="node_modules/@dictu/page-container/dist/index.css" />`

Als je CSS imports gebruikt vanuit JavaScript:

`javascript import "@dictu/page-container/dist/index.css";`

`Richtlijnen`

- Gebruik altijd de .dictu-page-containerclass voor de container-element. - Gebruik semantische HTML:

of

 voor de hoofdcontainer.
- Voeg indien nodig een

 attribuut toe voor navigatie en toegankelijkheid.
- De component zorgt voor consistente maximale breedte en centrering van
  content.
$3

`html


  Pagina titel

  
    Dit is de inhoud van de pagina met consistente styling en spacing.


  
    Sectie titel

    
      Deze container zorgt voor consistente breedte en centrering.


  Welkom

  
    Deze container heeft een ID voor betere toegankelijkheid.


CSS Klassen

- .dictu-page-container — hoofdcontainer voor de pagina content

`Design Tokens / CSS-variabelen`

De component gebruikt design tokens voor breedte en spacing. Voorbeeld:

`css .dictu-page-container { --govnl-container-max-inline-width: 80rem; --govnl-container-padding-inline: 1rem; --govnl-container-max-width: 1280px; / ... / }`

`Toegankelijkheid`

- Gebruik een semantisch juist HTML element (

,

,
  etc.).
- Voeg indien nodig een

 attribuut toe voor navigatie.
- Zorg dat alle interactieve elementen binnen de container toegankelijk zijn.
- Gebruik logische heading niveaus binnen de container.
Varianten
$3
De standaard page-container component met consistente maximale breedte en
centrering.

`js export const Default = { args: { content:

Pagina titel

Dit is de inhoud van de pagina met consistente styling en spacing.

,
    id: "page-container-1",
  },
};


Styling
De styling wordt verzorgd door de page-container CSS:

- .dictu-page-container` — basis container styling met maximale breedte,
centrering en padding

Functies

- Maximale breedte: Gecontroleerde maximale breedte via design tokens
- Centrering: Automatische centrering van content
- Padding: Horizontale padding voor consistente uitlijning
- Reset margins: Alle margins worden gereset voor predictable styling
- Responsief: Flexibele breedte die zich aanpast aan het scherm

Licentie

EUPL-1.2