Voorbeelden

Beschikbare opties

• heading-xxl
• heading-xl
• heading-large
• heading-normal
• heading-small
• heading-xs

HTML-element stijling ingesteld via CSS voorbeeld

Visueel voorbeeld:

HTML-voorbeeld:

<h1>h1 met weergave heading XXL</h1>
<h2>h2 met weergave heading XL</h2>
<h3>h3 met weergave heading Large</h3>
<h4>h4 met weergave heading Normal</h4>
<h5>h5 met weergave heading Small</h5>
<h6>h6 met weergave heading XS</h6>

Variabele gebruiken binnen een andere variabele

In dit voorbeeld is de styling ingesteld door een van de variabelen uit deze set in te laden binnen de variabele om de h1 te stylen.

CSS-voorbeeld:

:root {
  --headings-h1-font-size: var(--heading-xxl-font-size);
}

Voor meer informatie hierover zie CSS-variabelen gebruiken.

Class gebruiken binnen de HTML

Dit voorbeeld maakt gebruik van de classes uit deze set direct op de HTML-elementen. Dit is een geschikte manier voor uitzonderingen.

Waarschuwing: Waar mogelijk is het altijd aan te raden zo min mogelijk classes te gebruiken maar om gebruik te maken van het overerven van CSS. Maar omdat een uitzondering soms nodig is, is het mogelijk om de titelweergaven ook direct in de html te kunnen definiëren door middel van een classes.

Visueel voorbeeld:

HTML-voorbeeld:

<h3 class="heading-xxl">Heading XXL</h3>
<h3 class="heading-xl">Heading XL</h3>
<h3 class="heading-large">Heading Large</h3>
<h3 class="heading-normal">Heading Normal</h3>
<h3 class="heading-small">Heading Small</h3>
<h3 class="heading-xs">Heading XS</h3>

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/heading-base-set";

Instelbare variabelen