ContentHighlight

Komponentti, jolla voi korostaa leipätekstin joukossa olevia sisältöjä.

Julkaistu versiossa 7.0.0

Esikatselu

Käyttötarkoitus

Visuaalisten sisältönostojen tarkoituksena on korostaa tekstiartikkelin tai leipätekstin joukosta käyttäjän kannalta kaikkein tärkeimpiä asioita.

Sisältönoston avulla voit esimerkiksi

havainnollistaa asiaa käytännöllisellä esimerkillä,
kiinnittää huomion poikkeamaan normaalissa prosessissa tai
nostaa esille tulevan muutoksen tai muun ajankohtaisen asian.

Koska sisältönostot ovat osa leipätekstiä, niiden ei tarvitse olla erityisen lyhyitä tai tiiviitä, toisin kuin ilmoitusten (Alert).

Tee näin

Anna sisältönostolle aina selkeä ja kuvaava otsikko.
Valitse sisältönostolle ikoni, jotka tukee tekstisisältöä.

Älä tee näin

Älä käytä sisältönostoja liian tiheästi.
Älä käytä sisältönostoja virhetilanteiden tai muiden dynaamisten ilmoitusten antamiseen. Käytä tällöin Alert-komponenttia.

Saavutettavuus

Sisältönostolla tulee aina olla kuvaava otsikko. Määritä otsikkotaso (h1-h6) sivun muuhun sisältöön sopivaksi. Jotta artikkelin eri otsikkotasot ja tekstikokonaisuudet pysyvät selkeinä, sisältönostot kannattaa pyrkiä sijoittamaan niin, että niiden jälkeen alkaa aina uusi otsikoitu leipätekstikappale. Tällöin käyttäjän ei tarvitse yrittää muistaa, minkä otsikon alle kuuluvaa leipätekstiä sisältönoston jälkeen tulee.

Tarvittaessa otsikon visuaalisen koon voi muuttaa titleSize-propilla, joka ei vaikuta varsinaiseen otsikkotasoon.

Ruudunlukijaa varten sisältönosto esitetään section-elementillä. Ruudunlukija kertoo asiakkaalle sisältöalueen alkamisesta ja päättymisestä. Tämä korostaa sisältönoston eroa muusta tekstisisällöstä. Komponentin ikoni-elementille voi välittää aria-label-attribuutin käyttämällä iconAriaLabel-proppia.

Erilaiset sisältönostot

Voit käyttää joko reunaviivallista tai taustavärillistä versiota. Valitse käytettävä versio niin, että se soveltuu yhteen palvelun muun tyylin kanssa.

Valitse sisältönoston väri niin, että se tukee tekstisisältöä tai muutoin palvelun visuaalista ilmettä.

Sisältönostolla tulee aina olla ikoni. Voit valita ikonin vapaasti kuvitusikoneiden joukosta. Valitse ikoni niin, että se tukee tekstisisältöä.

Otsikon koon muuttaminen

Otsikon semanttista ja visuaalista kokoa voi tarvittaessa vaihtaa titleAs ja titleSize-proppien yhdistelmällä. Suosituksena on pitää titleSize koossa 5 ja asettaa titleAs dokumentin otsikkorakenteen mukaisesti.

Esimerkit poistuvasta toiminnallisuudesta

Esimerkki-, huomio- ja ohjetyyppiset sisältönostot poistuvat käytöstä (type-prop) versiossa 15.0.0. Toiminnallisuuden voi korvata joustavammin icon ja variant-proppien avulla.