Käyttöliittymien rakenne perustuu Kela Design Systemissä 12-palstaiseen malliin, jonka pohjalta layout ja palstoitus voidaan toteuttaa joustavasti ja käyttöliittymäkohtaisesti.
Välistyksen periaatteet
Mitä tiiviimmin kaksi elementtiä liittyvät toisiinsa, sitä tiiviimpi on niiden välinen välistys. Toisistaan erillisiä ryhmiä erotetaan suuremmalla välistyksellä.
Kelan ja Kannan verkkopalveluiden välistykset noudattavat pääsääntöisesti Kela Design Systemin ruudukkomallista johdettuja kahdeksalla jaollisia välistysarvoja (8 px, 16 px jne). Arvoja sovelletaan sekä pysty- että vaakasuuntaisiin välistyksiin.
Koodissa välistysmuuttujat on kuvattu rem-yksiköinä, jolloin 16 px = 1 rem. Arvot on dokumentoitu tämän ohjeen Muuttujat ja välistysarvot -osiossa.
Esimerkiksi kuvakkeiden kokoihin, lomakekenttiin ja tekstielementteihin sovelletaan Kela Design Systemin ruudukkomallin mukaisia välistys- ja mitoitusarvoja.
Tekstielementit
Tekstin pystysuuntainen välistys määräytyy suhteessa fontin rivinkorkeuteen (line-height). Tekstikappaleita erottava väli ei siis määrity fontin peruslinjasta eli heti kirjainten alareunasta, vaan hiukan linjan alapuolelta.
Tekstielementtien välistykset suhteutuvat fontin rivinkorkeuteen. Esimerkissä otsikon rivinkorkeus on 40 px ja leipätekstin 24 px. Tekstialueita erottava väli on 24 px.
Otsikon ja leipätekstin väliin jää tavallisesti 24 px tyhjää tilaa. Myös kahden tavallisen leipätekstikappaleen väliin jää pystysuunnassa yleensä 24 px. Kapealla näytöllä väli on näissä tilanteissa 16 px. Kela Design Systemin tekstikomponenteissa tämä välistysten responsiivisuus on valmiiksi huomioitu.
Tietyissä komponenteissa välistys voi olla myös tiiviimpi. Esimerkiksi Card-nostokorteissa H4-tason kokoon määritellyn otsikon ja leipätekstin väli on yleensä 8 px.
Päättyvä tekstikappale ja seuraavan kappaleen otsikko erotetaan toisistaan 48 px:n välistyksellä.
Text- ja Heading-komponenttien mukana tulee 1.5rem bottom-marginia (eli 24 px). Tämän voi yliajaa apuluokilla. Lisäksi Headingissa on responsiivinen top-margin (1.5 - 4.5 rem), joka riippuu otsikkotasosta H1 - H6 ja ruudun leveydestä. Esimerkkejä löytyy komponenttien sivuilta. Myös nämä arvot voi yliajaa apuluokilla.
Katso tarkemmat ohjeet ja esimerkit tekstielementtien välistyksiin ja sommitteluun Typografia-osiosta.
Otsikon ja sen alla olevien tekstikappaleiden välissä on yleensä 24 px. Bullet-listan kohtien välissä on 8 px.
Kun sivulla on useita otsikoituja kokonaisuuksia, niiden väliin kannattaa jättää vähintään 48 px.
Esimerkki sivusta, jossa sisältöjä on korostettu taustaväreillä ja ilmavalla sommittelulla. Tekstiosioiden välissä on 56 px välistys. Tekstikappaleiden välissä on silti edelleen 24 px.
Tässä listassa on haettu tiivistä asettelua. Kunkin numeroidun kohdan alla olevien tekstiosioiden sisällä on 16 px välistys.
Käyttöliittymäelementit
Kela Design Systemin tarjoamien komponenttien välistykset perustuvat pääsääntöisesti 8:lla jaollisiin vakioarvoihin. Alla esimerkkejä arvojen soveltamisesta.
Esimerkki InputGroup-komponentin välistyksistä. Samaan lomakekomponenttiin kuuluvat osat (nimilappu, täyttöohje
ja lomakekenttä) erotetaan toisistaan pystysuunnassa 8 px välistyksellä.
Useissa komponenteissa, joiden sisään on tarkoitus sijoittaa tekstiä tai muita elementtejä, on sisäänrakennettuna sisennyksiä ja marginaaleja. Leveyssuunnassa ne ovat usein responsiivisia, ja siten marginaalit pienenevät pienillä näytöillä.
Esimerkki välistyksistä Toast-komponentissa. Arvot perustuvat 8 px:n ruudukkomalliin.
Esimerkki Modal-komponentin välistysarvoista.
Modal-dialogiin voi sisällyttää tarvittaessa ilmoituksen. Välistysarvoja sovelletaan johdonmukaisesti molemmissa komponenteissa.
Lomakkeet
Lomakkeen eri elementtien välissä käytetään tyypillisesti 24px välistystä
Lomake-elementtien välissä 24px välistys.
Kaksipalstaisen lomakkeen välistyksessä käytetään samoja perussääntöjä.
Kaksipalstaisella lomakkeella pätevät samat välistykset kuin yksipalstaisella.
Kun lomake koostuu useista osioista, niiden väliin kannattaa jättää riittävän suuri väli. Tällöin osiot erottuvat toisestaan selkeästi ja lomakkeen silmäily helpottuu.
Lomakkeen osiot on otsikoitu ja osien väliin on jätetty 48px välistys.
Tiivis välistys
Joissakin tapauksissa sommittelu voidaan toteuttaa hieman tavallista tiiviimpänä. Tiivistä välistystä voi olla tarpeen soveltaa esimerkiksi asiantuntijakäyttöliittymissä, jossa kerralla näytettävää tietoa on paljon.
Harkitse aina, miten tiiviisti asiat kannattaa esittää. Liian tiivis esitystapa voi hankaloittaa olennaisen tiedon löytämistä, jos tietoryhmät eivät enää erotu toisistaan.
Kela Design Systemin ruudukkomallin neljäsosiin perustuvia väliarvoja (esim. 4 px = 0.25 rem) voi soveltaa tarpeen mukaan esimerkiksi taulukoissa sekä muissa komponenttien sisäisissä välistyksissä.
Tavallista tiiviimpiä välistyksiä voi soveltaa esim. Alert-komponentissa.
<>
<Alert variant="danger">Henkilöä ei löydy eläkelaitoksen rekisteristä. Ota yhteys Kelan IT-asiakastukeen.</Alert>
<Alert size="md" variant="danger">
Henkilöä ei löydy eläkelaitoksen rekisteristä. Ota yhteys Kelan IT-asiakastukeen.
</Alert>
<Alert size="sm" variant="danger">
Henkilöä ei löydy eläkelaitoksen rekisteristä. Ota yhteys Kelan IT-asiakastukeen.
</Alert>
<Alert textOnly variant="danger">
Henkilöä ei löydy eläkelaitoksen rekisteristä. Ota yhteys Kelan IT-asiakastukeen.
</Alert>
</>
Tiiviimpää välistystä voi soveltaa taulukkoon, jolloin yhdessä näkymässä mahtuu näkymään useampia rivejä kerralla.
