@dictu/heading
v3.2.0
Published
Heading CSS component.
Readme
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/headingJe 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/dist/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>