Välistykset

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.

Välistysarvoja voi hyödyntää esimerkiksi design-muuttujien, CSS-apuluokkien tai Spacing-komponentin avulla.

Kela Design Systemin mukaiset välistys- ja mitoitusarvot. — 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. — 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.

Otsikoitujen kokonaisuuksien välistykset. — Kun sivulla on useita otsikoituja kokonaisuuksia, niiden väliin kannattaa jättää vähintään 48 px.

Esimerkki sisältöjen välisisitä välistyksistä. — 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.

Esimerkki tiiviimmästä asettelusta. — 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 Toast-komponentin välistyksistä. — Esimerkki välistyksistä Toast-komponentissa. Arvot perustuvat 8 px:n ruudukkomalliin.

Esimerkki Modal-komponentin välistyksistä. — Esimerkki Modal-komponentin välistysarvoista.

Lomakkeet

Lomakkeen eri elementtien välissä käytetään tyypillisesti 24px välistystä

Lomake-elementin välistykset. — Lomake-elementtien välissä 24px välistys.

Kaksipalstaisen lomakkeen välistyksessä käytetään samoja perussääntöjä.

Lomake-elementin välistykset kaksipalstaisessa asettelussa. — 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.

Välistykset lomakkeen osioiden välillä. — 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ä.

Tiiviimmän asettelun voi saavuttaa esim.

Hyödyntämällä CSS-apuluokkia
Pienemmällä fonttikoolla
Kaksipalstaisella asettelulla
Hyödyntämällä komponenttien small-varianttia

Tavallista tiiviimpiä välistyksiä voi soveltaa esim. Alert-komponentissa.

Tiiviimpää välistystä voi soveltaa taulukkoon, jolloin yhdessä näkymässä mahtuu näkymään useampia rivejä kerralla.

Esimerkki tiivistetyistä välistyksistä. — Välistyksiä pienentämällä asiantuntijakäyttöliittymästä on saatu tiiviimpi. Myös fonttikokoa on pienennetty. Tietoja on silti helppo silmäillä.

Esimerkkejä välistyksistä

Esimerkki tietokortin tiivistetyistä välistyksistä. — Esimerkki tiiviistä korttiasettelusta. Tiedot ovat kahdessa palstassa ja niillä on 4 px välistys.