Text (Teksti)

Text-komponentin tekninen dokumentaatio ja käyttöesimerkit
Paragraph-komponentin tekninen dokumentaatio ja käyttöesimerkit

Leipäteksti (Body)

Suomi.fi-teemassa leipätekstin oletuskoko on 18px sekä mobiili- että desktop-näkymissä. Kun halutaan erottaa rakenteellisesti visuaalisin keinoin tietty tekstikappale tms., voidaan käyttää pienempää 16px fonttia. Suomi.fi-teemassa leipäteksti on oletuksena sävyltään musta (blackBase) ja variaatiota luomassa käytetään tumman harmaata (depthDark1).

Lihavoitua leikkausta käytetään leipätekstissä, kun halutaan korostaa käyttäjälle erityisen huomioitavaa tietoa. Lihavoitua tekstiä tulee käyttää harkiten. Jos lihavointia on käytetty liikaa, on käyttäjän vaikea ymmärtää, mihin hänen tulisi erityisesti kiinnittää huomiota sisällössä.

Suomi.fi-teeman leipäteksteissä käytetään Source Sans Pro Regular sekä Source Sans Pro Semibold -fonttia.

Tavanomaisissa tekstikappaleissa on suositeltavaa käyttää Paragraph-komponenttia, joka takaa oikean visuaalisen tyylin ja semantiikan.

Tekstikappale, joka on luotu käyttämällä semanttista Paragraph-komponenttia

Body textBody Text BoldBody Text SmallBody Text Small Bold

<Paragraph>
  Tekstikappale, joka on luotu käyttämällä semanttista Paragraph-komponenttia
</Paragraph>

<Text>
  Body text
</Text>

<Text variant="bold">
  Body Text Bold
</Text>

<Text smallScreen>
  Body Text Small
</Text>

<Text
  smallScreen
  variant="bold"
>
  Body Text Small Bold
</Text>

Ingressi (Lead)

Ingressi on sivun alussa esiintyvä tiivistelmä sivun sisällöstä. Ingressiä käytetään vain kerran yhdessä näkymässä. Suomi.fi-teemassa ingressitekstin koko on 22 px ja pienellä näytöllä 20 px.

Lead TextLead Text Small