Subtielere weergave
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.
- Voeg de class
de-emphasizedtoe aan de gewenste elementen. Voor meer informatie zie: Voorbeelden.
Voorbeelden
Paragraaf
Visueel voorbeeld:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
HTML-voorbeeld:
<p class="de-emphasized">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>Bijbehorende bestanden
Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen
Aandachtspunten:
- De standaard ingestelde waarden binnen Manon maken gebruik van de Body text set. Om gebruik te maken van deze set. Laad de set eenmalig in voordat overige componenten er gebruik van maken. Zie onderstaand voorbeeld voor meer informatie.
Importeer component via npm
CSS-voorbeeld:
/* Body text set */
@use "@minvws/manon/body-text-set";
/* De-emphasized */
@use "@minvws/manon/de-emphasized";Instelbare variabelen
Let op: De uitlijning van horizontaal uitgelijnde tags werken alleen in
combinatie met de class horizotal-view.
| Variabele | CSS-attribuut | Manon ingestelde waarde | Breekpunt | Class |
|---|---|---|---|---|
| --de-emphasized-font-size | font-size | var(--body-text-small-font-size) | - | de-emphasized |
| --de-emphasized-font-weight | font-weight | var(--body-text-small-font-weight) | - | |
| --de-emphasized-line-height | line-height | var(--body-text-small-line-height) | - | |
| --de-emphasized-text-color | text-color | var(--body-text-small-color) | - |
CSS
Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw project. Kies en gebruik de benodigde variabelen.
:root {
--de-emphasized-font-size: ;
--de-emphasized-font-weight: ;
--de-emphasized-line-height: ;
--de-emphasized-text-color: ;
}