Yleistä
Kelan ja Kannan verkkopalveluissa käytettävät käyttöliittymäkuvakkeet ja kuvitusikonit ovat saatavilla React-komponentteina ja svg-tiedostoina.
Kuvakekomponenttien tekstiväri ja koko periytyy käyttökontekstin mukaisesti. Kuvakkeiden väriä ja kokoa voi muokata size- ja color-proppien avulla.
Esimerkit koon ja värin asettamisesta löydät tämän sivun lopusta. Kaikkia kuvakekirjaston komponentteja voi lisäksi muokata käyttämällä SVG-elementin tukemia attribuutteja.
Lue lisää: Visuaalinen ilme / Kuvakkeet ja ikonit
Kuvakekoot
Käyttöliittymäkuvakkeet
Käyttöliittymäkuvakkeita sovelletaan neljässä eri vakiokoossa. Valmiissa React-kuvakekomponenteissa viivan vahvuus määräytyy automaattisesti kuvakkeen koon mukaan.
| Koko | Suhteellinen koko | Koko, px | Esimerkki |
|---|---|---|---|
| XS (oletusarvo) | 1rem | 16 x 16 | |
| SM | 1.5rem | 24 x 24 | |
| MD | 2rem | 32 x 32 | |
| LG | 3rem | 48 x 48 |
Kuvitusikonit
Kuvitusikoneille on määritetty kolme vakiokokoa: 32, 48 ja 64 px. Valmiissa React-kuvakekomponenteissa viivan vahvuus määräytyy automaattisesti kuvakkeen koon mukaan.
| Koko | Suhteellinen koko | Koko, px | Esimerkki |
|---|---|---|---|
| MD | 2rem | 32 x 32 | |
| LG | 3rem | 48 x 48 | |
| XL | 4rem | 64 x 64 |
Esimerkkejä
Alle on koottu muutamia esimerkkejä kuvakkeiden käytöstä. Joillekin komponenteille on toteutettu valmiit iconBefore- ja iconAfter-propit kuvakkeiden käyttöön.
Näitä käyttämällä komponentti asemoi kuvakkeet automaattisesti ja johdonmukaisesti.