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.
* Eerder was het gebruik van meerdere h1's per pagina toegestaan. Dit is gewijzigd in de HTML-specs van whatwg. Voor meer informatie hierover zie: de commit op whatwg.

Voorbeelden:

Visueel voorbeeld:

Dit is een h1

Dit is een h2

Dit is een h3

Dit is een h4

Dit is een h5
Dit is een h6

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:

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);

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Importeer component via npm

SCSS-voorbeeld:

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

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

Aandachtspunten:

  • De standaard ingestelde waarden binnen Manon maken gebruik van de headings-base-set.
  • De "headings"-variabelen zijn te gebruiken om een waarde in te stellen voor een of meerdere heading-types. Voor meer informatie zie: Design-keuzes instellen voor alle of meerdere titels.

Instelbare variabelen

Instelbare variabelen tabel:
NaamVariabeleCSS-attribuutManon ingestelde waardeBreekpuntClass
headings--headings-font-familyfont-familyvar(--application-base-font-family)--
--headings-font-sizefont-size1.5rem--
--headings-font-weightfont-weightbold--
--headings-line-heightline-heightvar(--application-base-line-height)--
--headings-text-colortext-colorvar(--application-base-text-color)--
--headings-marginmargin1rem--
h1--h1-font-familyfont-familyvar(--headings-font-family)--
--h1-font-sizefont-sizevar(--heading-xxl-font-size)--
--h1-font-weightfont-weightvar(--heading-xxl-font-weight)--
--h1-line-heightline-heightvar(--heading-xxl-line-height)--
--h1-text-colortext-colorvar(--heading-xxl-text-color)--
--h1-marginmarginvar(--heading-xxl-margin)--
h2--h2-font-familyfont-familyvar(--headings-font-family)--
--h2-font-sizefont-sizevar(--heading-xl-font-size)--
--h2-font-weightfont-weightvar(--heading-xl-font-weight)--
--h2-line-heightline-heightvar(--heading-xl-line-height)--
--h2-text-colortext-colorvar(--heading-xl-text-color)--
--h2-marginmarginvar(--heading-xl-margin)--
h3--h3-font-familyfont-familyvar(--headings-font-family)--
--h3-font-sizefont-sizevar(--heading-large-font-size)--
--h3-font-weightfont-weightvar(--heading-large-font-weight)--
--h3-line-heightline-heightvar(--heading-large-line-height)--
--h3-text-colortext-colorvar(--heading-large-text-color)--
--h3-marginmarginvar(--heading-large-margin)--
h4--h4-font-familyfont-familyvar(--headings-font-family)--
--h4-font-sizefont-sizevar(--heading-normal-font-size)--
--h4-font-weightfont-weightvar(--heading-normal-font-weight)--
--h4-line-heightline-heightvar(--heading-normal-line-height)--
--h4-text-colortext-colorvar(--heading-normal-text-color)--
--h4-marginmarginvar(--heading-normal-margin)--
h5--h5-font-familyfont-familyvar(--headings-font-family)--
--h5-font-sizefont-sizevar(--heading-small-font-size)--
--h5-font-weightfont-weightvar(--heading-small-font-weight)--
--h5-line-heightline-heightvar(--heading-small-line-height)--
--h5-text-colortext-colorvar(--heading-small-text-color)--
--h5-marginmarginvar(--heading-small-margin)--
h6--h6-font-familyfont-familyvar(--headings-font-family)--
--h6-font-sizefont-sizevar(--heading-xs-font-size)--
--h6-font-weightfont-weightvar(--heading-xs-font-weight)--
--h6-line-heightline-heightvar(--heading-xs-line-height)--
--h6-text-colortext-colorvar(--heading-xs-text-color)--
--h6-marginmarginvar(--heading-xs-margin)--

CSS

Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw project. Kies en gebruik de benodigde variabelen.

Om stijlkeuzes door te voeren op alle titels gebruik de onderstaande variabelen. Hierbij kan ook verwezen worden naar stijlkeuzes in heading-sets als deze toegevoegd zijn aan het project. Voor een voorbeeld zie: heading-base-set.

: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: ;
}

Om uitzonderingen toe te voegen op specifieke headings gebruik (een selectie van) de onderstaande variabelen.

: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: ;
}