Figure component

De figure component is een semantische container met bijschrift.

Gebruik deze component

Je kunt de CSS zo in je project installeren:

npm install --save-dev @dictu/figure

Je kunt de CSS uit node_modules/ importeren:

<link rel="stylesheet" href="node_modules/@dictu/figure/dist/index.css" />

Als je CSS imports gebruikt vanuit JavaScript:

import "@dictu/figure/dist/index.css";

Richtlijnen

• Gebruik in CSS de .dictu-figure class name voor de figure component.
• Gebruik altijd het <figure> element voor semantische betekenis.
• Voeg een <figcaption> toe voor beschrijvende tekst.
• Zorg dat de afbeelding binnen de figure een passende alt tekst heeft.

Beschrijving

De figure component is een semantische container voor afbeeldingen met bijschrift. Deze component combineert een afbeelding met een figcaption element om betekenisvolle context te bieden. De component is volledig toegankelijk en ondersteunt verschillende beeldverhoudingen.

Voorbeeldgebruik

<figure class="dictu-figure">
  <img
    class="dictu-image"
    src="/example-image.jpg"
    alt="Voorbeeldafbeelding"
    width="640"
    height="640"
  />
  <figcaption class="dictu-figure__caption">
    Dit is een voorbeeld van een bijschrift
  </figcaption>
</figure>

CSS Klassen

• .dictu-figure — hoofdcontainer voor de figure component
• .dictu-figure__caption — bijschrift element (figcaption)

Functies

• Semantische structuur: Gebruikt HTML5 <figure> en <figcaption> elementen
• Flexibele layout: Verticale uitlijning met configureerbare afstand
• Toegankelijk bijschrift: Correct gekoppeld aan de afbeelding
• Verschillende beeldverhoudingen: Ondersteuning voor square, landscape, portrait en video ratio's
• Responsief ontwerp: Automatische aanpassing aan verschillende schermformaten

Beeldverhoudingen

De component ondersteunt de volgende beeldverhoudingen:

• Square: 1:1 verhouding voor vierkante afbeeldingen
• Landscape: 4:3 verhouding voor liggende afbeeldingen
• Portrait: 3:4 verhouding voor staande afbeeldingen
• Video: 16:9 verhouding voor video content

CSS Custom Properties

De component gebruikt de volgende CSS custom properties:

• --govnl-figure-column-gap: Afstand tussen afbeelding en bijschrift
• --govnl-figure-caption-color: Tekstkleur van het bijschrift (standaard: #000)
• --govnl-figure-caption-font-size: Lettergrootte van het bijschrift (standaard: 1rem)
• --govnl-figure-caption-line-height: Regelafstand van het bijschrift (standaard: 1.4)

Toegankelijkheid

• Gebruik altijd het <figure> element voor semantische betekenis
• Voeg een <figcaption> toe voor beschrijvende tekst
• De afbeelding binnen de figure moet een passende alt tekst hebben
• Voor decoratieve afbeeldingen gebruik alt="" en role="presentation"
• Zie WCAG 2.1.1 Non-text Content

Varianten

• Standaard: Met bijschrift en normale afbeelding
• Decoratief: Voor decoratieve afbeeldingen zonder betekenisvolle alt-tekst
• Verschillende beeldverhoudingen: Square, landscape, portrait, video

Licentie

EUPL-1.2