Body text set
Set voor het instellen van de stijlkeuzes voor de hoofdtekst.
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 weergaven. Voor meer informatie zie het overzicht met instelbare variabelen.
- Pas de stijlkeuzes toe waar nodig. De stijlkeuzes kunnen door middel van variabelen binnen de CSS toegepast worden. Voor meer informatie hierover zie CSS-variabelen gebruiken.
Voorbeelden
Paragraaf
Visuele weergave
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit euismod consectetur. Praesent est diam, ultricies ut lacus nec, molestie commodo arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
HTML-voorbeeld
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit euismod consectetur. Praesent est diam, ultricies ut lacus nec, molestie commodo arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>Paragraaf benadrukte weergave
Visuele weergave
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit euismod consectetur. Praesent est diam, ultricies ut lacus nec, molestie commodo arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
HTML-voorbeeld
<p class="emphasized>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit euismod consectetur. Praesent est diam, ultricies ut lacus nec, molestie commodo arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>Paragraaf subtielere weergave
Visuele weergave
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit euismod consectetur. Praesent est diam, ultricies ut lacus nec, molestie commodo arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
HTML-voorbeeld
<p class="de-emphasized>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit euismod consectetur. Praesent est diam, ultricies ut lacus nec, molestie commodo arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</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/body-text-set";Instelbare variabelen
Variabelen om te gebruiken binnen onderliggende types
| Variabele | CSS-attribuut | Manon ingestelde waarde | Breekpunt | Class |
|---|---|---|---|---|
| --text-set-font-family | font-family | -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Roboto Sans", "Noto Sans", sans-serif | - | - |
| --text-set-font-size | font-size | 1.25rem | - | - |
| --text-set-font-weight | font-weight | normal | - | - |
| --text-set-strong-font-weight | font-weight | bold | - | - |
| --text-set-line-height | line-height | 1.5 | - | - |
| --text-set-text-color | text-color | #000 | - | - |
| --text-set-text-align | text-align | left | - | - |
Beschikbare variabelen per type
| Naam | Variabele | CSS-attribuut | Manon ingestelde waarde | Breekpunt | Class |
|---|---|---|---|---|---|
| body text small | --body-text-small-set-font-size | font-size | 0.8rem | - | - |
| --body-text-small-set-font-weight | font-weight | var(--text-set-font-weight) | - | - | |
| --body-text-small-set-line-height | line-height | var(--text-set-line-height) | - | - | |
| --body-text-small-set-text-color | text-color | #696969 | - | - | |
| --text-set-small-text-align | text-align | var(--text-set-text-align) | - | - | |
| body text medium | --body-text-medium-set-font-size | font-size | 0.8rem | - | - |
| --body-text-medium-set-font-weight | font-weight | var(--text-set-font-weight) | - | - | |
| --body-text-medium-set-line-height | line-height | var(--text-set-line-height) | - | - | |
| --body-text-medium-set-text-color | text-color | #696969 | - | - | |
| --text-set-medium-text-align | text-align | var(--text-set-text-align) | - | - | |
| body text large | --body-text-large-set-font-size | font-size | 0.8rem | - | - |
| --body-text-large-set-font-weight | font-weight | var(--text-set-font-weight) | - | - | |
| --body-text-large-set-line-height | line-height | var(--text-set-line-height) | - | - | |
| --body-text-large-set-text-color | text-color | #696969 | - | - | |
| --text-set-large-text-align | text-align | var(--text-set-text-align) | - | - |
CSS
Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw project. Kies en gebruik de benodigde variabelen.
:root {
/* Available variables to use within all text types */
--text-set-font-family: ;
--text-set-font-size: ;
--text-set-font-weight: ;
--text-set-strong-font-weight: ;
--text-set-line-height: ;
--text-set-text-color: ;
--text-set-text-align: ;
/* Body text small */
--body-text-small-font-size: ;
--body-text-small-font-weight: ;
--body-text-small-line-height: ;
--body-text-small-color: ;
--body-text-small-text-align: ;
/* Strong */
--body-text-small-strong-font-weight: ;
/* Body text medium */
--body-text-medium-font-size: ;
--body-text-medium-font-weight: ;
--body-text-medium-line-height: ;
--body-text-medium-color: ;
--body-text-medium-text-align: ;
/* Strong */
--body-text-medium-strong-font-weight: ;
/* Body text large */
--body-text-large-font-size: ;
--body-text-large-font-weight: ;
--body-text-large-line-height: ;
--body-text-large-color: ;
--body-text-large-text-align: ;
/* Strong */
--body-text-large-strong-font-weight: ;
}