Naar Core

Typography

Er zijn 5 niveaus koppen beschikbaar. Zorg dat er geen verspringingen in de koppen voorkomen, dus na een `h2` mag geen `h4` komen, zonder dat daar een `h3` tussen zit.

Gebruik van koppen

Gebruik koppen alleen in de 'echte' content, niet in sidebars, menu's, footers, etc.
Meer informatie over het gebruik van headings vindt je bij de sectie layout.

Kop 1

Kop 2

Kop 3

Kop 4

Kop 5

Paragraaf

Layout van een kop veranderen

Door een element role="heading" en een class .is-h# te geven kan een element als een kop worden weergegeven. Het hekje moet je natuurlijk vervangen door een getal met de waarde getal van 1 t/m 5.

Gebruik en toegankelijkheid

Gebruikers van screenreaders gebruiken headers vaak om een indruk te krijgen van de structuur van een pagina. Wijk alleen van de standaard af als je heel zeker weet wat je doet.

Sla ook geen niveaus over; dus gebruik geen H3 zonder dat er een voorgaande H2 is.

Als je een heading 'dieper' wil dan heading level 6 (html gaat niet verder dan h6), gebruik dan role="heading" aria-level="x". In het laatste voorbeeld wordt een paragraaf als een h7 gekenmerkt. Let op: met deze methode is dat voor mensen met een screenreader merkbaar, maar visueel niet, omdat UNO geen styling heeft voor h6 of 'virtuele headers'. Je kan zo'n virtuele kop ook stylen door er class="is-hx" op te zetten en het daarmee op een bestaande heading te laten lijken.

H4 weergeven als kop 1

paragraph weergeven als kop 2

Een paragraph als een kop van niveau 7.

Varianten

Verschillende varianten voor uitlijning en weergave

Links uitlijnen

Rechts uitlijnen

Centreren

Klein kapitaal

Gedimt

Tekst met een link en een externe
link
.

Meta informatie