Palvelut

Kuva tekstillä eli "Image with text" -komponentti

Lue alta lisää kuvan sijoituksesta sekä adaptiivisesta ja oletusasetuksesta image with text -komponenttia käytettäessä.

Image with text -komponentti

Image with text -komponentissa kuvan voi sijoittaa joko vasemmalle tai oikealle. Suositeltavaa on, että kuvien sijoittelua käytetään sivuilla vuorotahdissa, eli esimerkiksi ensin vasemmalla, sitten oikealla ja taas vasemmalla jne.

Lisäasetuksena kumpaankin kuva-asetteluun (oikea tai vasen) valitaan vielä joko Default- tai Adaptive-asetus. Katso kuvat alla, joista näkee, kuinka teksti asemoituu tämän komponentin eri asetusten kanssa.

Suosittelemme, että vaihtelet näitä asetuksia, jos käytät Image with text -komponenttia useamman kerran samalla sivulla. 

Three students sitting next to a wooden table, and studying. Two of them have laptops in front of them. Photo: Unto Rautio
Image with text -komponentti, jossa kuvan sijoittelu: Media placement: Default image on the right

Otsikko

Tässä näet Image with text -komponentin, jossa kuva on sijoitettu oikealle rajauksella "default" (media placement: default image on the right). Tämä asetus säilyttää kuvan alkuperäisen kuvasuhteen riippumatta sen vieressä olevan tekstin pituudesta. Pidempi teksti kiertyy kuvan alle.

Komponentissa olevaan tekstiin voi käyttää perusmuotoiluja, jotka ovat saatavilla työkalupalkista tekstilaatikon yläosasta.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Three students sitting next to a wooden table, and studying. Two of them have laptops in front of them. Photo: Unto Rautio
Image with text -komponentti, jossa kuvan sijoittelu: Media placement: Adaptive image on the right

Otsikko

Tässä näet Image with text -komponentin, jossa kuva on sijoitettu oikealle rajauksella "adaptive" eli mukautuva (media placement: adaptive image on the right). Tämä asetus venyttää kuvaa suhteessa sen vieressä olevaan tekstiin. Pidempi teksti ei kierry kuvan alle. Tätä asetusta suositellaan käytettävän kuvituskuville, joilla ei ole selkeätä fokuspistettä.

Komponentissa olevaan tekstiin voi käyttää perusmuotoiluja, jotka ovat saatavilla työkalupalkista tekstilaatikon yläosasta.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Three students sitting next to a wooden table, and studying. Two of them have laptops in front of them. Photo: Unto Rautio
Image with text -komponentti, jossa kuvan sijoittelu: Media placement: Default image on the left

Otsikko

Tässä näet Image with text -komponentin, jossa kuva on sijoitettu vasemmalle rajauksella "default" (media placement: default image on the left). Tämä asetus säilyttää kuvan alkuperäisen kuvasuhteen riippumatta sen vieressä olevan tekstin pituudesta. Pidempi teksti ei kierry kuvan alle.

Komponentissa olevaan tekstiin voi käyttää perusmuotoiluja, jotka ovat saatavilla työkalupalkista tekstilaatikon yläosasta.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Three students sitting next to a wooden table, and studying. Two of them have laptops in front of them. Photo: Unto Rautio
Image with text -komponentti, jossa kuvan sijoittelu: Media placement: Adaptive image on the left

Otsikko

Tässä näet Image with text -komponentin, jossa kuva on sijoitettu vasemmalle rajauksella "adaptive" eli mukautuva (media placement: adaptive image on the left). Tämä asetus venyttää kuvaa suhteessa sen vieressä olevaan tekstiin. Pidempi teksti ei kierry kuvan alle. Tätä asetusta suositellaan käytettävän kuvituskuville, joilla ei ole selkeätä fokuspistettä.

Komponentissa olevaan tekstiin voi käyttää perusmuotoiluja, jotka ovat saatavilla työkalupalkista tekstilaatikon yläosasta.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Tätä palvelua tarjoaa:

Viestintäpalvelut

Löysitkö tästä tarvitsemasi tiedon? Jos et, ota meihin yhteyttä.
  • Julkaistu:
  • Päivitetty:
Jaa
URL kopioitu