Siirry sisältöön
Kela Design System
KDS
14.5.0
Kela
Kanta
Komponentit
Muuttujat ja kirjastot
Visuaalinen ilme
Ohjeet ja mallit
Yleistä
Avaa valikko
Valikko
Muuttujat
Tietoa design-muuttujista
Design-muuttujat
Apuluokat
Tietoa apuluokista
CSS-apuluokat
Kuvakkeet
Kuvakekirjastot
Kuvitusikonit
Käyttöliittymäkuvakkeet
Logot
Kelan ja Kannan logot
Pankkien logot
Sosiaalisen median logot
Muut logot
Kela Design System
/
Muuttujat ja kirjastot
/
Sosiaalisen median logot
Sosiaalisen median logot
KDS tarjoaa sosiaalisen median logot erillisinä React-komponentteina.
Tällä sivulla
Sosiaalisen median logot
<List unstyled> <ListItem className="kds-mb-3"> <Link standalone href="#" icon={ <Icon> <LogoFacebook /> </Icon> } > Facebook </Link> </ListItem> <ListItem className="kds-mb-3"> <Link standalone href="#" icon={ <Icon> <LogoGithub /> </Icon> } > GitHub </Link> </ListItem> <ListItem className="kds-mb-3"> <Link standalone href="#" icon={ <Icon> <LogoGoogleScholar /> </Icon> } > Google Scholar </Link> </ListItem> <ListItem className="kds-mb-3"> <Link standalone href="#" icon={ <Icon> <LogoInstagram /> </Icon> } > Instagram </Link> </ListItem> <ListItem className="kds-mb-3"> <Link standalone href="#" icon={ <Icon> <LogoLinkedin /> </Icon> } > LinkedIn </Link> </ListItem> <ListItem className="kds-mb-3"> <Link standalone href="#" icon={ <Icon> <LogoOrchid /> </Icon> } > Orchid </Link> </ListItem> <ListItem className="kds-mb-3"> <Link standalone href="#" icon={ <Icon> <LogoResearchgate /> </Icon> } > ResearchGate </Link> </ListItem> <ListItem className="kds-mb-3"> <Link standalone href="#" icon={ <Icon> <LogoSnapchat /> </Icon> } > Snapchat </Link> </ListItem> <ListItem className="kds-mb-3"> <Link standalone href="#" icon={ <Icon> <LogoTiktok /> </Icon> } > TikTok </Link> </ListItem> <ListItem className="kds-mb-3"> <Link standalone href="#" icon={ <Icon> <LogoTwitterX /> </Icon> } > TwitterX </Link> </ListItem> <ListItem> <Link standalone href="#" icon={ <Icon> <LogoYoutube /> </Icon> } > Youtube </Link> </ListItem> </List>
Mustat versiot
<List unstyled> <ListItem className="kds-mb-3"> <Link standalone href="#" icon={ <Icon> <LogoFacebookBlack /> </Icon> } > Facebook </Link> </ListItem> <ListItem className="kds-mb-3"> <Link standalone href="#" icon={ <Icon> <LogoGithubBlack /> </Icon> } > GitHub </Link> </ListItem> <ListItem className="kds-mb-3"> <Link standalone href="#" icon={ <Icon> <LogoInstagramBlack /> </Icon> } > Instagram </Link> </ListItem> <ListItem className="kds-mb-3"> <Link standalone href="#" icon={ <Icon> <LogoLinkedinBlack /> </Icon> } > LinkedIn </Link> </ListItem> <ListItem className="kds-mb-3"> <Link standalone href="#" icon={ <Icon> <LogoOrchidBlack /> </Icon> } > Orchid </Link> </ListItem> <ListItem className="kds-mb-3"> <Link standalone href="#" icon={ <Icon> <LogoResearchgateBlack /> </Icon> } > ResearchGate </Link> </ListItem> <ListItem className="kds-mb-3"> <Link standalone href="#" icon={ <Icon> <LogoSnapchatBlack /> </Icon> } > Snapchat </Link> </ListItem> <ListItem className="kds-mb-3"> <Link standalone href="#" icon={ <Icon> <LogoTiktokBlack /> </Icon> } > TikTok </Link> </ListItem> <ListItem className="kds-mb-3"> <Link standalone href="#" icon={ <Icon> <LogoTwitterXBlack /> </Icon> } > TwitterX </Link> </ListItem> <ListItem> <Link standalone href="#" icon={ <Icon> <LogoYoutubeBlack /> </Icon> } > Youtube </Link> </ListItem> </List>
Valkoiset versiot
<List unstyled className="kds-bg-dark kds-p-6"> <ListItem className="kds-mb-3"> <Link standalone href="#" variant="light" icon={ <Icon> <LogoFacebookWhite /> </Icon> } > Facebook </Link> </ListItem> <ListItem className="kds-mb-3"> <Link standalone href="#" variant="light" icon={ <Icon> <LogoGithubWhite /> </Icon> } > GitHub </Link> </ListItem> <ListItem className="kds-mb-3"> <Link standalone href="#" variant="light" icon={ <Icon> <LogoInstagramWhite /> </Icon> } > Instagram </Link> </ListItem> <ListItem className="kds-mb-3"> <Link standalone href="#" variant="light" icon={ <Icon> <LogoLinkedinWhite /> </Icon> } > LinkedIn </Link> </ListItem> <ListItem className="kds-mb-3"> <Link standalone href="#" variant="light" icon={ <Icon> <LogoOrchidWhite /> </Icon> } > Orchid </Link> </ListItem> <ListItem className="kds-mb-3"> <Link standalone href="#" variant="light" icon={ <Icon> <LogoResearchgateWhite /> </Icon> } > ResearchGate </Link> </ListItem> <ListItem className="kds-mb-3"> <Link standalone href="#" variant="light" icon={ <Icon> <LogoSnapchatWhite /> </Icon> } > Snapchat </Link> </ListItem> <ListItem className="kds-mb-3"> <Link standalone href="#" variant="light" icon={ <Icon> <LogoTiktokWhite /> </Icon> } > TikTok </Link> </ListItem> <ListItem className="kds-mb-3"> <Link standalone href="#" variant="light" icon={ <Icon> <LogoTwitterXWhite /> </Icon> } > TwitterX </Link> </ListItem> <ListItem> <Link standalone href="#" variant="light" icon={ <Icon> <LogoYoutubeWhite /> </Icon> } > Youtube </Link> </ListItem> </List>
Tällä sivulla
Sosiaalisen median logot
Mustat versiot
Valkoiset versiot