Heading
Komponentti määrämuotoisten ja responsiivisten otsikoiden toteutukseen.
Julkaistu versiossa 0.15.3
Esikatselu
Käyttötarkoitus
Otsikot auttavat luomaan sivun sisällölle perusrakenteen ja helpottavat käyttäjää sisällön pääkohtien hahmottamisessa. Lisätietoja otsikkojen soveltamisesta ja otsikkotyyleistä: Typografia.
Tee näin
- Jokaiselta sivulta tulee löytyä H1-tason otsikko.
- Käytä otsikkotasoja hierarkkisesti. H1-tason jälkeen tulee H2-tason otsikko jne. Välistä ei saa puuttua otsikkotasoja.
- Jos otsikon koko vaikuttaa väärältä, lisää oikea otsikkotaso ja säädä sen visuaalista kokoa.
- Otsikoi sisällöt kuvaavasti. Suosi selkeää kieltä, jotta otsikkoja on helppo silmäillä.
Älä tee näin
- Älä käytä liian pitkiä otsikoita.
- Älä käytä otsikkotasoja sattumanvaraisesti esim. siten, että sivulta löytyisi vain H1 ja H3-tasojen otsikoita.
Saavutettavuus
- Sivun tulee olla rakenteeltaan loogisesti suunniteltu. Otsikkoja voi ajatella myös sivun sisällysluettelona. Sekä näkevä käyttäjä että ruudunlukijakäyttäjä muodostaa kokonaiskäsityksen sisällöstä otsikoiden perusteella.
- Otsikkotasoja tulee käyttää järjestyksessä (H1, H2, H3, H4). Välistä ei saa puuttua otsikkotasoja. Näin sivun rakenne hahmottuu paremmin myös ruudunlukijan käyttäjälle.
- Ruudunlukija tulkitsee otsikoiksi vain heading-merkityt komponentit, jonka vuoksi oikean komponentin käyttäminen on tärkeää.
Perusotsikot
Display-otsikot
Erityistapauksissa otsikon näyttävyyttä voi korostaa soveltamalla tavallista suurempia display-otsikkokokoja.
Kategoriaotsikko
Kategoriaotsikkoa käytetään eri osioiden erottamiseen pudotusvalikoissa (Dropdown) ja navigaatiossa (Sidebar). Normaalissa tekstissä käytetään ainoastaan H-tason perusotsikoita.
Otsikko taustavärillä
Taustavärillä korostettua otsikkoa voi tarvittaessa soveltaa esimerkiksi prosessin eri vaiheiden selkeämpään jäsentelyyn.
Taustaväriin perustuvaa otsikkotyyliä ei tule käyttää useissa peräkkäisissä otsikkotasoissa (esim. sekä H1- että H2-tason otsikoissa).
Kun otsikkoa on korostettu visuaalisesti erottuvalla taustavärillä, otsikon tekstikoko kannattaa usein määrittää yhtä tai kahta otsikkotasoa pienempään kokoon. Siten esimerkiksi H2-tason otsikko näytetään palkin sisällä vastaavassa koossa kuin H3- tai H4-tason otsikko.
Otsikon koon ja välistyksen muuttaminen
Joissain tapauksissa tietyn H-tason mukainen otsikko voi näyttää kokonsa puolesta visuaalisesti epätasapainoiselta. Esimerkiksi komponentin sisällä näytevättää otsikkoa voi olla tarve pienentää.
Tällöin otsikkoa voi muokata siten, että sen fonttikoko määräytyy pienemmän otsikkotason mukaisesti. Otsikon taso säilyy silti edelleen samana.
Tyhjä tila otsikoiden ylä- ja alapuolella on asetettu leipätekstin näkökulmasta. Muissa yhteyksissä (esim. komponenttien sisällä) käytettyjen otsikoiden välistyksiä voi olla tarve muokata esimerkiksi seuraavilla tavoilla:
- Yläpuolella olevan marginin poisto, kun otsikko on liian kaukana komponentin yläreunasta.
- Alapuolella olevan marginin poisto tai muuttaminen, kun otsikkoa käytetään toisen komponentin sisällä, esim. kortin otsikkona.
Leipätekstin seassa olevien otsikoiden marginia ei saa muokata ilman perusteltua syytä.
Alla olevassa esimerkissä H3-tason otsikko toistuu H5-tasoa vastaavassa fonttikoossa. Myös otsikon marginia on hienosäädetty siten, että asettelu toimii paremmin kyseisen komponentin sisällä.