Link

Komponentti linkkien eli siirtymien esittämiseen. Linkki voi esiintyä osana muuta sisältöä tai yksittäin.

Julkaistu versiossa 6.2.0

Esikatselu

Käyttötarkoitus

Tekstilinkki on tyypillinen linkki, jota voi käyttää leipätekstin seassa. Linkki erottuu muusta leipätekstistä, mutta sitä ei ole mitenkään erityisesti korostettu. Siten näitä peruslinkkejä voi käyttää sivustolla tarvittaessa paljonkin.

Käytä tavallista tekstilinkkiä, kun haluat siirtää asiakkaan joko toiseen näkymään sivuston tai palvelun sisällä tai kokonaan uuteen sivustoon. Linkki voi olla myös ns. ankkurilinkki, eli se siirtää asiakkaan toiseen kohtaan saman sivun sisällä.

Tekstilinkkejä voi käyttää leipätekstin seassa, yksittäin leipätekstin ulkopuolella tai linkkilistoina. Tavallinen tekstilinkki sopii myös käytettäväksi esim. taulukon solussa tai ilmoituksen sisällä.

Tee näin

Nimeä linkit lyhyesti mutta kuvaavasti. Lue lisää linkkien nimeämisestä linkkiohjeesta.
Kokoa samaan aiheeseen liittyvät linkit yhdeksi listaksi. Listan voi tarvittaessa myös otsikoida.
Käytä ensisijaisesti sinistä linkkiä.
Käytä värillisellä taustalla leipätekstin väristä linkkiä, jos linkin ja taustan välinen kontrasti ei ole muutoin riittävä.

Älä tee näin

Älä käytä tavallista linkkiä, jos linkkiä on tarpeen korostaa. Käytä tällöin korostettua linkkiä (LinkBox).
Älä käytä linkkiä käynnistämään toimintoja. Käytä tällöin painiketta (Button).
Älä käytä linkkilistoja korvaamaan palvelun navigaatiota.

Saavutettavuus

Nimeä linkit lyhyesti mutta kuvaavasti. Varmista, että linkki erottuu riittävästi muusta tekstisisällöstä. Jos linkki avautuu uuteen välilehteen, tulee käyttää newTabLabel-proppia joka välittää tiedon linkin avautumisesta uuteen välilehteen ruudunlukijalle.

Tekstin seassa oleva linkki

Linkkiä voi käyttää leipätekstin seassa. Tällöin linkki näytetään alleviivattuna.

Jos linkki avautuu uuteen välilehteen, linkin lopussa tulee olla asiasta kertova kuvake.

Leipätekstin osana olevia linkkejä voi tarvittaessa esittää listamuodossa kuten muutakin leipätekstiä.

Yksittäinen linkki

Tekstilinkki voi esiintyä myös yksittäin leipätekstikappaleen ulkopuolella. Tällöin linkin lopussa on kuvake, joka kuvaa linkin siirtymän tyyppiä.

Jos linkki avautuu samassa välilehdessä, linkin lopussa tulee olla siirtymistä osoittava nuolikuvake.

Jos yksittäinen linkki avautuu uuteen välilehteen, linkin lopussa tulee olla tästä kertova kuvake.

Yksittäisiä linkkejä voi koota listoiksi List-komponentilla. Nimeä listassa olevat linkit samankaltaisesti.

Linkit taulukoissa

Voit käyttää tekstilinkkiä myös taulukoissa. Taulukoissa kannattaa käyttää alleviivattua linkkiä, jolloin linkin perässä olevaa kuvaketta ei tarvita ja linkki vie sivusuunnassa vähemmän tilaa.

Linkit värillisellä taustalla

Linkkiväri on riittävän erottuva vain vaaleaa taustaa vasten. Jos tekstilinkki on tarpeen esittää sellaisen taustavärin päällä, jonka kanssa linkkivärin kontrasti ei täytä saavutettavuusvaatimuksia, käytä linkistä leipätekstin väristä versiota. Leipätekstin värikontrasti taustavärien kanssa on riittävä. Leipätekstin värinen linkki saa myös alleviivauksen, joten linkki erottuu leipätekstistä.