@dictu/heading NPM

Koptekst die in de koppenstructuur ingesteld kan worden op het juiste niveau.

Gebruik deze component

Je kunt de CSS zo in je project installeren:

npm install --save-dev @dictu/heading

Je kunt de CSS uit node_modules/ importeren:

<link rel="stylesheet" href="node_modules/@dictu/heading/dist/index.css" />

Als je CSS imports gebruikt vanuit JavaScript:

import "@dictu/heading/index.css";

Richtlijnen

Gebruik altijd maar één H1 heading op een pagina.
Gebruik alleen een heading als er content onder staat.
Gebruik headings niet voor de opmaak maar alleen voor tekstuele hiërarchie van de content.
Sla geen niveaus over met het gebruik van headings, bijvoorbeeld geen H3 gebruiken zonder dat er een voorgaande H2 is.

Kop gebruiken met het uiterlijk van een ander level

Gebruik voor een koptekst die semantisch op het ene level staat, maar visueel de uitstraling heeft van een ander level de dictu-heading en dictu-heading--level-{het visuele level} op het semantische heading component naar keuze.

<h2 class="nl-heading nl-heading--level-4">
  Een koptekst die in de koppenstructuur op het tweede level staat en eruit ziet als het vierde level.
</h2>

@dictu/heading v1.0.0-alpha.1

Gebruik deze component

Richtlijnen

Kop gebruiken met het uiterlijk van een ander level

Links

Relevante WCAG regels