Infografiikka-komponentti

Komponentti on saatavilla useimmissa sisältötyypeissä: Programmes ja Programme subpage, Hub, Sivu, Koulutusohjelma, Avoimen yliopiston kurssi, Summer school course, Palvelu, Uutinen ja Tapahtuma

Alla oleva kuva esittää komponentin peruskenttiä. Käytä Theme-kenttää valitaksesi komponentille taustavärin, ja valitse kumman variantin haluat luoda.

Samalla komponentilla kaksi versiota

Komponentin suunnitteluvaiheessa oli jo selvää, että samalla komponentilla on ainakin kaksi erilaista käyttötarkoitusta, joten päätimme luoda kaksi eri versiota (varianttia). Molemmat variantit käyttävät samoja editointikenttiä, mutta näyttävät hieman erilaisilta keskenään.

Huomaa, että etenkin tekstikentät näyttäytyvät varianteissa eri tavoin!

Versio 1: Curriculum

Tämä versio on suunniteltu visualisoimaan erityisesti tutkintorakennetta. Katso alla oleva esimerkki, joka esittää käytettävissä olevat sisältökentät. Huomaa, että kaikkia kenttiä ei ole pakko täyttää. Tällöin ne eivät näy komponentissa, jolloin sen viemä tila myös pienenee.

• Vain Curriculum-versiossa on käytössä lisätiedoille tarkoitettu Info text -kenttä, joka asettuu varsinaisten solujen alle.
• Käytä linkkikenttää ohjaamaan käyttäjä kyseisen tutkintorakenteen osasta kertovaan kohtaan sivulla. Saat tähän ankkurilinkin ko. otsikkoa klikaten.
• Tutkintorakennetta kuvaaviin komponentteihin valitaan väriksi sininen (Theme-kenttään väriksi Brand 2)
• Huomaa, että solut asettuvat kuhunkin ruutukokoon responsiivisesti, eli solujen koko skaalautuu joko isommaksi tai pienemmäksi riippuen lukijan laitteesta ja näyttöasetuksista.

Versio 2: Ranking

Toinen versio komponentista on tarkoitettu tärkeiden lukujen, kuten rankingien, esittämiseen. Tämä versio on sivulla leveämpi kuin Curriculum-versio.

• Voit käyttää komponenttia valitsemalla "Use first value as a "total" sum" -liukukytkimen, jolloin ensimmäinen solu muuttuu ns. otsikkosoluksi. Kts. esimerkki alta kentän visuaalisista eroavaisuuksista.
• ÄLÄ käytä Info text -kenttää, sillä sitä ei ole suunniteltu käytettävän tässä versiossa.
• Voit joko lisätä linkkikenttään linkin tai jättää kentän tyhjäksi. Alla olevassa esimerkissä näkyy molempia tapoja.