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>