Titels

Gebruik titels om structuur binnen de pagina aan te geven.

Aandachtspunten:

• Gebruik altijd een h1 per pagina.*
• Kies altijd het juiste titel-element uit h1 > h6 op basis van de structuur in de HTML. Niet op basis van de visuele weergave.
• HTML-elementen h1 > h6 kunnen via de css voorzien worden van stijl. Voor meer informatie zie: voorbeelden.
• Als niet ieder gelijkwaardig titel-element, bijvoorbeeld een h1, dezelfde visuele stijling gebruikt kan de stijl gezet worden door middel van een voorgedefineerde set. Binnen deze set worden de beschikbare "heading-styles" vastgelegd. Denk bijvoorbeeld aan een "heading-large" of een "heading-small". Voor meer informatie hierover zie: Titel basisset.

Voorbeelden:

Visueel voorbeeld:

HTML-voorbeeld:

<h1>Dit is een h1</h1>
<h2>Dit is een h2</h2>
<h3>Dit is een h3</h3>
<h4>Dit is een h4</h4>
<h5>Dit is een h5</h5>
<h6>Dit is een h6</h6>

Design-keuzes instellen voor alle of meerdere titels

Een set aan algemene varibelen zijn toegevoegd. Deze kunnen gebruikt worden om op een plek een waarde in te vullen en die te gebruiken binnen verschillende titel-types. Bijvoorbeeld om alle titels hetzelfde lettertype of dezelfde font-weight mee te geven. Het gebruik van gedeelde variabelen helpt herhaling te voorkomen en daarmee de kans op fouten bij toekomstige wijzigingen.

CSS-voorbeeld instellen:

--headings-font-family: "Naam van gewenste lettertype";

CSS-voorbeeld gebruik:

In dit voorbeeld wordt de eerder ingestelde "--headings-font-family" waarde doorgevoerd binnen de beschikbare heading-types.

--h1-font-family: var(--headings-font-family);
--h2-font-family: var(--headings-font-family);
--h3-font-family: var(--headings-font-family);
--h4-font-family: var(--headings-font-family);
--h5-font-family: var(--headings-font-family);
--h6-font-family: var(--headings-font-family);

Gebruik maken van een heading-set

Heading-sets kunnen gebruikt worden om op een centrale plek de stijlkeuzes vast te leggen voor de beschikbare titel-weergaven.

Beschikbare styling sets voor headings zijn:

• Heading-basisset

CSS-voorbeeld instellen:

Gebruik de variabelen die beschikbaar zijn binnen de gekozen heading-set.

Het onderstaande voorbeeld maakt gebruik van @minvws/manon/headings-base-set.

Voor meer informatie en alle beschikbare variabelen binnen deze set zie: Heading-basisset.

--heading-xxl-font-size: 2.5rem;
--heading-xl-font-size: 2rem;
--heading-large-font-size: 1.5rem;
--heading-normal-font-size: 1rem;
--heading-small-font-size: 0.8rem;
--heading-xs-font-size: 0.7rem;

CSS-voorbeeld gebruik:

In dit voorbeeld worden de eerder ingestelde "font-size"-waardes doorgevoerd binnen de beschikbare heading-types.

--h1-font-family: var(--heading-xxl-font-size);
--h2-font-family: var(--heading-xl-font-size);
--h3-font-family: var(--heading-large-font-size);
--h4-font-family: var(--heading-normal-font-size);
--h5-font-family: var(--heading-small-font-size);
--h6-font-family: var(--heading-xs-font-size);

/* Headings set */
@use "@minvws/manon/headings-base-set";

/* Headings */
@use "@minvws/manon/headings";

:root {
  /* Available variables to use within all heading types */
  --headings-font-family: ;
  --headings-font-size: ;
  --headings-font-weight: ;
  --headings-line-height: ;
  --headings-text-color: ;
  --headings-margin: ;
}

:root {
  /* h1 */
  --h1-font-family: ;
  --h1-font-size: ;
  --h1-font-weight: ;
  --h1-line-height: ;
  --h1-text-color: ;
  --h1-margin: ;

  /* h2 */
  --h2-font-family: ;
  --h2-font-size: ;
  --h2-text-color: ;
  --h2-font-weight: ;
  --h2-line-height: ;
  --h2-margin: ;

  /* h3 */
  --h3-font-family: ;
  --h3-font-size: ;
  --h3-text-color: ;
  --h3-font-weight: ;
  --h3-line-height: ;
  --h3-margin: ;

  /* h4 */
  --h4-font-family: ;
  --h4-font-size: ;
  --h4-text-color: ;
  --h4-font-weight: ;
  --h4-line-height: ;
  --h4-margin: ;

  /* h5 */
  --h5-font-family: ;
  --h5-font-size: ;
  --h5-text-color: ;
  --h5-font-weight: ;
  --h5-line-height: ;
  --h5-margin: ;

  /* h6 */
  --h6-font-family: ;
  --h6-font-size: ;
  --h6-text-color: ;
  --h6-font-weight: ;
  --h6-line-height: ;
  --h6-margin: ;
}