Esikatselu
<LinkWithInfo href="#" infoText="Dolor sit amet.">
Lorem ipsum
</LinkWithInfo>
Käyttötarkoitus
Käytä komponenttia linkin yhteydessä näytettävän lisätiedon tai lyhyen yhteenvedon esittämiseen. Älä lisää linkin alle lisätietoa erillisenä leipätekstikappaleena, vaan käytä tätä komponenttia, jolla lisätiedot näytetään osana linkkiä.
Lisätietoteksti auttaa asiakasta arvioimaan, tarjoaako linkki häntä kiinnostavaa tietoa.
Komponentti toimii erityisen hyvin erilaisissa listauksissa. Lisätietotekstien avulla asiakkaan on helppo vertailla linkkilistan eri vaihtoehtoja ja valita näistä sopivimmat sisällöt. Lisätietoteksti voi myös houkutella asiakasta siirtymään sisältöön esimerkiksi uutis- tai ajankohtaislistauksissa.
Vaikka linkki toimii visuaalisena otsikkona lisätietotekstille, komponentti on kuitenkin linkki eikä otsikko.
Komponenttiin voi yhdistää myös kuvitusikonin, jolloin linkki saa suuremman visuaalisen painoarvon.
- Kirjoita linkkiteksti otsikkomaiseksi ja mahdollisimman lyhyeksi.
- Kirjoita linkin lisätietoihin tiivis yhteenveto, joka auttaa asiakasta arvioimaan linkin hyödyllisyyttä.
- Älä käytä tätä komponenttia, jos asiakkaalle ei ole lisätiedoista todellista hyötyä.
Saavutettavuus
Koko komponentin alue on klikattavaa, joten asiakkaan ei tarvitse osua juuri linkin otsikkoon saadakseen linkin valittua.
Ruudunlukija lukee linkin yhteydessä myös sille annetun yhteenvetotekstin. Tekstin tulee siis olla tiivis mutta sisältöä hyvin kuvaava.
Jos linkki avautuu uuteen välilehteen, tulee käyttää newTabLabel
-proppia joka välittää tiedon linkin avautumisesta uuteen välilehteen ruudunlukijalle.
Tavallinen linkki lisätiedolla
Linkin yhteydessä käytetään siirtymistä kuvaavaa kuvaketta (nuoli tai “avaa uuteen välilehteen” -kuvake).
<LinkWithInfo
href="#"
infoText="Ennen toimeentulotuen hakemista sinun tulee selvittää, voitko saada muita tuloja tai etuuksia, esimerkiksi työttömyysturvaa tai asumistukea."
>
Hae toimeentulotukea
</LinkWithInfo>
<LinkWithInfo
href="#"
target="_blank"
newTabLabel="avautuu uuteen välilehteen"
infoText=" Pituus 2 min 21 s, tekstitetty. (YouTube)"
>
Katso video OmaKelan etusivusta
</LinkWithInfo>
Lisätietotekstin luettavuutta voi parantaa esittämällä tekstin erillisissä kappaleissa. Pyri kuitenkin käyttämään
ensisijaisesti tiivistä kuvausta, johon kappalejakoja ei tarvita.
<LinkWithInfo
href="#"
infoText={[
"Voit hakea työkyvyttömyyseläkettä Kelasta, työeläkelaitoksesta tai molemmista. Lisäksi voit hakea eläkettä EU- tai Eta-maista, Sveitsistä tai sosiaaliturvasopimusmaista.",
"Voit hakea tällä hakemuksella myös osatyökyvyttömyyseläkettä työeläkelaitokselta.",
]}
>
Hae työkyvyttömyyseläkettä
</LinkWithInfo>
Lisätiedollisia linkkejä voi koota listaksi käyttämällä List
-komponenttia. Nimeä linkit samankaltaisesti.
Listan voi tarvittaessa otsikoida.
<List unstyled>
<ListItem className="kds-mb-6">
<LinkWithInfo href="#" infoText="Voit valita äitiyspakkauksen tai 170 euron rahasumman.">
Äitiysavustus
</LinkWithInfo>
</ListItem>
<ListItem className="kds-mb-6">
<LinkWithInfo href="#" infoText="Äitiysvapaan ajalta maksetaan äitiysrahaa noin 4 kuukautta.">
Äitiysraha
</LinkWithInfo>
</ListItem>
<ListItem className="kds-mb-6">
<LinkWithInfo href="#" infoText="Isyysvapaan ajalta maksetaan isyysrahaa noin 9 viikkoa.">
Isyysraha
</LinkWithInfo>
</ListItem>
<ListItem className="kds-mb-6">
<LinkWithInfo href="#" infoText="Vanhempainvapaalle voi jäädä äiti tai isä.">
Vanhempainpäiväraha
</LinkWithInfo>
</ListItem>
<ListItem>
<LinkWithInfo href="#" infoText="Lapsilisää maksetaan alle 17-vuotiaasta lapsesta.">
Lapsilisä
</LinkWithInfo>
</ListItem>
</List>
Korostettu linkki lisätiedolla
Korostettu linkki sopii esimerkiksi asiakkaan
kannalta tärkeiden palveluiden tai toimintojen kuvaamiseen.
Korostetussa linkissä on aina
kuvitusikoni. Käytä ikonia vain jos
kyseiselle toiminnolle tai palvelulle on olemassa vakiintunut tai muutoin ymmärrettävä ikoni.
<LinkWithInfo href="#" infoText="Yhteystiedot henkilöasiakkaille" icon={<IconPersonsCircle />}>
Asiakaspalvelu
</LinkWithInfo>
Lisätiedollisia linkkejä voi koota listaksi käyttämällä List
-komponenttia. Nimeä linkit samankaltaisesti.
Listan voi tarvittaessa otsikoida.
<List unstyled>
<ListItem className="kds-mb-6">
<LinkWithInfo href="#" infoText="Yhteystiedot henkilöasiakkaille" icon={<IconPersonsCircle />}>
Asiakaspalvelu
</LinkWithInfo>
</ListItem>
<ListItem>
<LinkWithInfo
href="#"
icon={<IconMathCircle />}
infoText="Laske arvio, miltä ajalta ja kuinka paljon etuutta maksetaan"
>
Laskurit
</LinkWithInfo>
</ListItem>
</List>