Paragraaf
Benodigde stappen:
- Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
- Vul de variabelen met de gewenste stijlkeuzes. Voor meer informatie zie het overzicht met instelbare variabelen.
Voor leesbaarheid en toegankelijkheid wordt aangeraden om de maximale regellengte te beperken tot 80 karakters. Voor meer informatie zie: maximale regellengte en w3.org - Success Criterion 1.4.8 Visual Presentation.
Voorbeelden:
Visueel voorbeeld:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec libero dictum, ultrices orci vel, varius ipsum. Aliquam in lorem lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent id accumsan quam. Cras erat diam, vestibulum vel congue id, vehicula in purus. Quisque sodales neque augue, at pulvinar ligula sodales vestibulum. Nam id tristique nibh, eget porta mauris. Curabitur vitae pulvinar quam. Mauris id risus vel diam venenatis pulvinar. Maecenas ultricies id velit sed rhoncus. Aliquam erat volutpat. Phasellus et posuere purus. Morbi a viverra risus.
HTML-voorbeeld:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec libero dictum, ultrices orci vel, varius ipsum. Aliquam in lorem lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent id accumsan quam. Cras erat diam, vestibulum vel congue id, vehicula in purus. Quisque sodales neque augue, at pulvinar ligula sodales vestibulum. Nam id tristique nibh, eget porta mauris. Curabitur vitae pulvinar quam. Mauris id risus vel diam venenatis pulvinar. Maecenas ultricies id velit sed rhoncus. Aliquam erat volutpat. Phasellus et posuere purus. Morbi a viverra risus.</p>Bijbehorende bestanden
Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen
Importeer component via NPM
CSS-voorbeeld:
@use "@minvws/manon/p";Instelbare variabelen
| Variabele | CSS-attribuut | Manon ingestelde waarde | Breekpunt | Class |
|---|---|---|---|---|
| --p-line-height | line-height | var(--application-base-line-height) | - | - |
| --p-font-size | font-size | var(--application-base-font-size) | - | - |
| --p-font-weight | font-weight | var(--application-base-font-weight) | - | - |
| --p-text-color | text-color | var(--application-base-text-color) | - | - |
| --p-background-color | background-color | unset | - | - |
CSS
Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw project. Kies en gebruik de benodigde variabelen.
:root {
--p-line-height: ;
--p-font-size: ;
--p-font-weight: ;
--p-text-color: ;
--p-background-color: ;
}