Siirry sisältöön

14.5.0

LinkWithInfo

Komponentti linkin ja siihen liittyvän lisätiedon näyttämiseen.

Julkaistu versiossa 6.3.0

Esikatselu

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.

Tee näin
  • Kirjoita linkkiteksti otsikkomaiseksi ja mahdollisimman lyhyeksi.
  • Kirjoita linkin lisätietoihin tiivis yhteenveto, joka auttaa asiakasta arvioimaan linkin hyödyllisyyttä.
Älä tee näin
  • Ä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).

Lisätietotekstin luettavuutta voi parantaa esittämällä tekstin erillisissä kappaleissa. Pyri kuitenkin käyttämään ensisijaisesti tiivistä kuvausta, johon kappalejakoja ei tarvita.

Lisätiedollisia linkkejä voi koota listaksi käyttämällä List-komponenttia. Nimeä linkit samankaltaisesti. Listan voi tarvittaessa otsikoida.

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.

Lisätiedollisia linkkejä voi koota listaksi käyttämällä List-komponenttia. Nimeä linkit samankaltaisesti. Listan voi tarvittaessa otsikoida.