LinkBox

Komponentti asiakkaan kannalta tärkeiden linkkien korostamiseen.

Julkaistu versiossa 6.2.0

Esikatselu

Käyttötarkoitus

Käytä LinkBoxia nostolinkkinä, jos asiakkaan huomio on tarve kiinnittää tiettyyn linkkiin. Nostolinkki erottuu tavallista tekstilinkkiä paremmin. Nostolinkkejä voi myös näyttää listana, jos on tarve korostaa usean linkin ryhmää.

Vielä nostolinkkiä suuremman visuaalisen painoarvon saat tarvittaessa Call to Action -linkillä. Tällöin linkki näyttää ensisijaiselta painikkeelta, joka kutsuu asiakasta klikkaamaan. Lue lisää CTA-linkistä.

Tee näin

Käytä nostolinkkiä, kun haluat asiakkaan kiinnittävän huomiota yksittäiseen linkkiin tai linkkilistaan.
Kokoa samaan aiheeseen liittyvät linkit yhdeksi ryhmäksi.
Nimeä korostetut linkit lyhyesti mutta kuvaavasti. Lue lisää linkkien nimeämisestä linkkiohjeesta.

Älä tee näin

Älä korosta kaikkia linkkejä, vaan ainoastaan asiakkaan kannalta tärkeimmät.
Älä käytä korostettua linkkiä käynnistämään toimintoja. Käytä tällöin painiketta (Button).
Vältä leveitä linkkejä, joissa linkkiteksti ja siirtymiskuvake ovat kaukana toisistaan.

Saavutettavuus

Nimeä linkit lyhyesti, mutta kuvaavasti. Jos linkki avautuu uuteen välilehteen, ruudunlukijan tulee aina saada siitä tieto.

Linkkityypit

Oletusnostolinkki

Jos linkki avautuu samaan ikkunaan, siinä tulee olla oikealle osoittava väkänen.

Jos linkki avautuu uudessa välilehdessä, siinä tulee olla uuteen välilehteen avautumista osoittava kuvake.

Jos linkki kuvaa asiakkaan kannalta olennaista päätoimintoa, siinä voi olla oikealle osoittava nuoli. Käytä yhdessä linkkilistassa kuitenkin aina vain joko väkästä tai nuolta.

Nostolinkkiin voi tarvittaessa yhdistää huomioelementiksi kuvitusikonin, joka kertoo linkin sisällöstä. Näitä kannattaa kuitenkin käyttää säästeliäästi ja vain tilanteissa, joissa kyseiselle linkille on jokin vakiintunut tai muutoin yleisesti tunnistettava ikoni.

Tarvittaessa voit käyttää valkoista väriversiota erottamaan esimerkiksi eri linkkilistoja toisistaan. Valkoinen versio sopii myös käytettäväksi erilaisten taustavärien päällä.

Nostolinkille voidaan antaa linkkiä kuvaavaa lisäteksti, joka auttaa asiakasta valitsemaan oikean linkin. Lisäteksti voidaan esittää myös kuvitusikonin kanssa.

Samaan aihealueeseen kuuluvia nostolinkkejä voi näyttää myös listana. Linkit voi listata allekkain yhteen palstaan tai useampaan rinnakkaiseen palstaan.

Huom! Esimerkki on puutteellinen responsiivisuuden osalta.

Neliömallinen nostolinkki

Luonnos

Ryhmittelykomponentit ovat edelleen kehityksessä, joten niiden API ja ominaisuudet saattavat vielä muuttua.

Voit käyttää neliömallista linkkiä korostamaan asiakkaan kannalta tärkeitä siirtymiä esimerkiksi palvelun keskeisiin toimintoihin tai sisältöihin. Neliömalliset linkit toimivat parhaiten ryhmänä ja erityisesti mobiilikoossa. Neliömallisesta linkistä on saatavilla myös valkoinen väriversio oletuslinkin tapaan.

Linkkiryhmä layout="group" tukee 1–4 linkkiä. Linkit tasataan keskelle tai vasemmalle sivun asettelusta riippuen. Mobiilikoossa parhaalta näyttää ryhmä, jossa linkkejä on parillinen määrä.

Linkkiryhmä layout="grid"-asetuksella tukee useampia linkkejä ruudukkomaisessa asettelussa. Linkit skaalautuvat ja rivittyvät automaattisesti siten, että ne täyttävät niitä ympäröivän elementin. Tarvittaessa ryhmittelyn voi toteuttaa itse. Asetuksella layout="none" saa valmiit ryhmittelytyylit pois käytöstä.

Pyöristetty nostolinkki

Huom! Pyöristettyä nostolinkkiä käytetään vain Kanta-teemassa. Lue yleisemmät ohjeet pyöristysten toteuttamiseen.

Nostolinkin reunojen pyöristys on toteutettavissa rounded-propin avulla.

Pyöristetty reunatyyli toimii nostolinkeissä yleensä parhaiten joko yksittäisessä nostossa tai muutaman linkin listassa.

Samaan ryhmään kuuluvien linkkinostojen reunatyylinä käytetään säännönmukaisesti joko pyöristettyä tai suorareunaista tyyliä.

Jos samaan ryhmään kuuluvia linkkinostoja on paljon, linkeissä kannattaa usein suosia normaalia reunatyyliä. Esimerkiksi useaan sarakkeeseen jakautuvissa linkkiryhmissä pyöristetty reunatyyli voi tuottaa visuaalisesti hälyisen vaikutelman.

Huomioitavaa selaintuessa

Neliön muotoiset linkit käyttävät aspect-ratio-määritystä. Selaintukea voi parantaa lisäämällä linkkiä ympäröivälle elementille kds-ratio-luokan. Lue lisää: aspect-ratio(Avautuu uuteen välilehteen)
LinkBoxGroup käyttää Container queries -ominaisuutta, jonka selaintukea varmistavat normaalit media-queryt. Asettelussa kannattaa huomioida, että uudemmat selaimet skaalaavat sisältöä container-elementin leveyden mukaan ja vanhemmat selaimet taas selainikkunan leveyden mukaan. Lue lisää: Container queries(Avautuu uuteen välilehteen)