Titel basisset

Basisset voor het stylen van titels.

Benodigde stappen:

1. 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 titelweergaven toe waar nodig. De titelweergaven kunnen op twee manieren toegepast worden. Door middel van variabelen binnen de CSS of door middel van classes binnen de HTML. Maak gebruik van de CSS-variabelen waar mogelijk en voeg alleen de classes toe in de HTML voor uitzonderingen om de code aanpasbaar en overzichtelijk te houden. Voor meer informatie hierover zie CSS-variabelen gebruiken.

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