Logot
Verkkopalveluissa käytettävät Kelan ja Kannan logot on saatavilla erillisinä React-komponentteina. Komponentti renderöi logon inline-SVG-elementtinä.
Teknisesti logoja käytetään samaan tapaan kuin kuvakkeita. Logoelementin koko tulee kuitenkin itse määrittää käyttökontekstiin sopivaksi.
- Logoissa voi soveltaa tälle sivulle koottujen esimerkkien mukaisia oletuskokoja.
- Huomioi asettelussa logolle määritetty suoja-alue. Lue lisää: Visuaalinen ilme / Logot
Kelan logot
<LogoKela height="48" width="83" aria-label="Kela" />
<LogoFpa height="48" width="73" aria-label="Fpa" />
<LogoOmaKela height="48" width="175" aria-label="OmaKela" />
<LogoMittFpa height="48" width="157" aria-label="MittFpa" />
<LogoMyKela height="48" width="154" aria-label="MyKela" />
<LogoMuuKela height="48" width="174" aria-label="MuuKela" />
<LogoMuKela height="48" width="156" aria-label="MuKela" />
<div className="kds-bg-brand-primary kds-p-6">
<LogoKelaWhite height="48" width="83" aria-label="Kela" />
</div>
<div className="kds-bg-brand-primary kds-p-6">
<LogoFpaWhite height="48" width="73" aria-label="Fpa" />
</div>
<div className="kds-bg-brand-primary kds-p-6">
<LogoOmaKelaWhite height="48" width="175" aria-label="OmaKela" />
</div>
<div className="kds-bg-brand-primary kds-p-6">
<LogoMittFpaWhite height="48" width="157" aria-label="MittFpa" />
</div>
<div className="kds-bg-brand-primary kds-p-6">
<LogoMyKelaWhite height="48" width="154" aria-label="MyKela" />
</div>
<div className="kds-bg-brand-primary kds-p-6">
<LogoMuuKelaWhite height="48" width="174" aria-label="MuuKela" />
</div>
<div className="kds-bg-brand-primary kds-p-6">
<LogoMuKelaWhite height="48" width="156" aria-label="MuKela" />
</div>
Kannan logot
<LogoKanta height="32" width="132" aria-label="Kanta" />
<LogoOmaKanta height="32" width="240" aria-label="OmaKanta" />
<LogoMittKanta height="32" width="216" aria-label="MittKanta" />
<div className="kds-bg-brand-primary kds-p-6">
<LogoKantaWhite height="32" width="132" aria-label="Kanta" />
</div>
<div className="kds-bg-brand-primary kds-p-6">
<LogoOmaKantaWhite height="32" width="240" aria-label="OmaKanta" />
</div>
Favicon
Favicon on pieni kuvake, joka näkyy mm. selaimen välilehdellä sivuston yhteydessä ja kirjanmerkissä.
Käytä kuvakkeena yksinkertaista kuvaketta joka toimii hyvin pienessä koossa. Varmista, että kuvake on selkeä ja tunnistettava.
Määrittele favicon esim. seuraavasti:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16" />
<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />