Figure CSS component.
npm install @dictu/figureDe figure component is een semantische container met bijschrift.
Je kunt de CSS zo in je project installeren:
``console`
npm install --save-dev @dictu/figure
Je kunt de CSS uit node_modules/ importeren:
`html`
Als je CSS imports gebruikt vanuit JavaScript:
`javascript`
import "@dictu/figure/dist/index.css";
- Gebruik in CSS de .dictu-figure class name voor de figure component.
- Gebruik altijd het element voor semantische betekenis.
- Voeg een toe voor beschrijvende tekst.alt
- Zorg dat de afbeelding binnen de figure een passende tekst heeft.
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.
`html`
src="/example-image.jpg"
alt="Voorbeeldafbeelding"
width="640"
height="640"
/>
Dit is een voorbeeld van een bijschrift
- .dictu-figure — hoofdcontainer voor de figure component.dictu-figure__caption
- — bijschrift element (figcaption)
- Semantische structuur: Gebruikt HTML5 en
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
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
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:--govnl-figure-caption-font-size
#000)
- : Lettergrootte van het bijschrift--govnl-figure-caption-line-height
(standaard: 1rem)
- : Regelafstand van het bijschrift
(standaard: 1.4)
- Gebruik altijd het element voor semantische betekenis
- Voeg een toe voor beschrijvende tekstalt
- De afbeelding binnen de figure moet een passende tekst hebbenalt=""
- Voor decoratieve afbeeldingen gebruik en role="presentation"`
- Zie
WCAG 2.1.1 Non-text Content
- Standaard: Met bijschrift en normale afbeelding
- Decoratief: Voor decoratieve afbeeldingen zonder betekenisvolle alt-tekst
- Verschillende beeldverhoudingen: Square, landscape, portrait, video
EUPL-1.2