Siirry sisältöön

14.5.0

Kuvitusikonit

Kela Design Systemin tarjoamia kuvitusikoneja käytetään esimerkiksi linkkielementtien visuaaliseen korostamiseen ja tekstimuotoisten sisältöjen kuvittamiseen. Verkkopalveluissa kuvitusikonien minimikoko on 32 px.

Käyttökohteet

Ikoneita käytetään kuvituksellisissa sisällöissä ja tietyissä Kela Design Systemin komponenteissa, joissa kuvakkeella on ensisijaisesti kuvittava rooli.

Kuvitusikoneja voi soveltaa esimerkiksi visuaalisesti korostetuissa linkeissä ja nostokorteissa.

Kuvakekirjasto: Muuttujat ja kirjastot – Kuvitusikonit

Kuvitusikonit, kuvituskuva.

Esimerkit

Esimerkki kuvitusikonien käytöstä.
Kuvitusikoneja voi käyttää esimerkiksi nostokorteissa ja visuaalisesti korostetuissa linkeissä.
Esimerkki kuvitusikonien käytöstä lisäelementteinä.
Kuvitusikoneihin ei välttämättä tarvitse soveltaa saavutettavan kontrastin 3:1-vähimmäisvaatimusta, jos ikonit toimivat ainoastaan koristavina lisäelementteinä.

Koko ja tyyli

Koko: : Kuvitusikonien minimikoko on 32 px. Kuvitusikoneita käytetään yleensä isommassa koossa kuin pelkistettyjä käyttöliittymäkuvakkeita.

Muotokieli: Kuvitusikonit ovat tyyliltään hieman koristeellisempia kuin pelkistettyyn muotokieleen perustuvat käyttöliittymäkuvakkeet.

Värit: Verkkopalvelujen ja käyttöliittymien kuvitusikoneissa käytetään Kela Design Systemissä määriteltyjä verkkoilmeen värejä.

Kuvitusikonien kokoluokat.
Kuvitusikoneja voi soveltaa kolmessa eri koossa. Kuvakkeen minimikoko on 32 px.
Esimerkki kuvitusikonin asettelusta.
Esimerkki laskuria kuvaavan kuvitusikonin asettelusta Card-nostokortissa.