Fonttikoot
Fonttien koko skaalautuu joustavasti näyttökoon mukaan. Pienillä näytöillä otsikot toistuvat suhteellisesti hieman pienemmässä koossa, mutta leipätekstin koko pysyy kuitenkin samana.
Otsikot
Kela Design Systemin otsikkotyylit määräytyvät responsiivisesti. Yleisimmissä sisällöissä käytetään otsikkotyylejä H1-H6. Erityistapauksissa otsikon näyttävyyttä voi korostaa soveltamalla tavallista suurempia display-otsikkokokoja.
Huomaa, että otsikon koko ja otsikkotaso eivät välttämättä tarkoita samaa asiaa. Saavutettavien verkkopalvelujen toteutuksessa myös sisällön rakenne jäsentyy otsikko- ja tekstitasojen kautta.
Joidenkin käyttöliittymäelementtien kohdalla voi olla tarvetta muuttaa fontin oletuskokoa, jotta tekstielementtien ulkoasu istuu muuhun sisältöön.
Fonttikoot määräytyvät modular scale -laskentakaavan mukaisilla kertoimilla. Lisätietoa tästä löytyy typografiamuuttujien sivulta.
Esimerkki tilanteesta, jossa Card-komponenttiin tarvitaan sivun sisältörakenteen takia H2-otsikkotaso, mutta otsikko on sellaisenaan visuaalisesti liian iso komponentin sisälle. Tekstin koko voidaan määritellä alkuperäistä pienemmäksi (esimerkissä H4-tason otsikon kokoiseksi). Vaikka tekstin koko muuttuu, rakenne säilyy samana.
Tavalliset otsikot
Yleisimmissä sisällöissä käytetään otsikkotyylejä H1-H6.
Voit tarkistaa otsikoiden koon eri kokoisilla näytöillä selainikkunaa kaventamalla.
Huom! Arvot on esitetty taulukossa pikselikokoina, jotka eivät ole saavutettavia. Voit hyödyntää muuttujat ja luokat -sivun muuttujia tai valmista Heading-komponenttia saavutettavien ja skaalautuvien tekstien toteuttamiseen.
H1 · · NaNpx
Tämä on otsikko
H2 · · NaNpx
Tämä on otsikko
H3 · · NaNpx
Tämä on otsikko
H4 · · NaNpx
Tämä on otsikko
H5 · · NaNpx
Tämä on otsikko
H6 · · NaNpx
Tämä on otsikko
Display-otsikot
Erityistapauksissa (esimerkiksi header-elementeissä) otsikon näyttävyyttä voi korostaa soveltamalla tavallista suurempia display-otsikkokokoja.
Display 1 · · NaNpx
Tämä on otsikko
Display 2 · · NaNpx
Tämä on otsikko
Display 3 · · NaNpx
Tämä on otsikko
Display 4 · · NaNpx
Tämä on otsikko
Muut otsikot
Kategoriaotsikkoa käytetään eri osioiden erottamiseen pudotusvalikoissa ja navigaatiossa.
Kategoriaotsikko · · NaNpx
Tämä on kategoriaotsikko
Leipäteksti
Kela Design System tarjoaa seuraavat valmiit tekstityylit sisältöjen esitykseen.
Leipäteksti · · NaNpx
Kela tukee lapsiperheitä useilla etuuksilla. Pikaoppaan avulla saat selkeän kuvan, mitkä etuudet ovat sinulle ajankohtaisia. Perhe-etuudet ja hakuohjeet on listattu tiiviisti aikajärjestykseen.
Lihavoitu leipäteksti · · NaNpx
Kela tukee lapsiperheitä useilla etuuksilla. Pikaoppaan avulla saat selkeän kuvan, mitkä etuudet ovat sinulle ajankohtaisia. Perhe-etuudet ja hakuohjeet on listattu tiiviisti aikajärjestykseen.
Harmaa leipäteksti · · NaNpx
Kela tukee lapsiperheitä useilla etuuksilla. Pikaoppaan avulla saat selkeän kuvan, mitkä etuudet ovat sinulle ajankohtaisia. Perhe-etuudet ja hakuohjeet on listattu tiiviisti aikajärjestykseen.
Suuri leipäteksti · · NaNpx
Kela tukee lapsiperheitä useilla etuuksilla. Pikaoppaan avulla saat selkeän kuvan, mitkä etuudet ovat sinulle ajankohtaisia. Perhe-etuudet ja hakuohjeet on listattu tiiviisti aikajärjestykseen.
Pieni leipäteksti · · NaNpx
Kela tukee lapsiperheitä useilla etuuksilla. Pikaoppaan avulla saat selkeän kuvan, mitkä etuudet ovat sinulle ajankohtaisia. Perhe-etuudet ja hakuohjeet on listattu tiiviisti aikajärjestykseen.
Lomakkeet
Kela Design System tarjoaa seuraavat valmiit tekstityylit lomakkeiden esitykseen.
Lomakekentän nimilappu · · NaNpx
Lomakekentän ohje · · NaNpx
Sukunimi
Lomakekentän virheilmoitus · · NaNpx
Pakollinen tieto puuttuu. Syötä sukunimesi.
Lomakekentän lisätieto · · NaNpx
50 merkkiä jäljellä