Omasivusto.fi
Komponentit· Perusosat

Komponentit

Perusosat

Sivun rakennuspalikat: aloitusosio, teksti, kuva, ruudukko, toimintakehote ja esittelyrivit.

10 komponenttia

Esimerkit piirretään valitulla teemalla: gallerian pohjan omat värit, fontit ja pyöristykset, tai tumma valmis paletti.

Aloitusosio

Osio hero

Sivun ensimmäinen osio: iso otsikko, lyhyt esittely, yksi tai kaksi painiketta ja kuva vierellä, taustalla tai kortissa. Tehtäväkortit-tyylissä lohkot ovat kävijän yleisimmät tehtävät: yksi linkki kortissa, puhelimella allekkain.

Tyylit (8)

Valitse tyyli, niin esimerkki yllä vaihtuu siihen. Sisältö pysyy samana, vain ulkoasu vaihtuu.

Asetukset (40)
AsetusMuokataanOletus
Otsikko headingTekstiHeading
Otsikon korostettu loppu headingAccentTeksti–
Merkki otsikon yllä badgeTeksti–
Alaotsikko subheadingTeksti–
Kuva imageKuva–
Vaihtoehtoinen teksti imageAltTeksti–
Kuvan rajaus imageFocusValinta– (Keskeltä · Yläosa näkyvissä (ihmiset) · Alaosa näkyvissä)
Kuvan leveys (px) imageWidthLuku–
Kuvan korkeus (px) imageHeightLuku–
Kuvan tehtävät koot imageWidthsTeksti800,1200,1600
Kuvan leveys sivulla imageSizesTeksti100vw
Painikkeen teksti buttonLabelTeksti–
Painikkeen linkki buttonUrlLinkki–
Tyyli buttonVariantValinta– (Ensisijainen · Toissijainen)
Toisen painikkeen teksti button2LabelTeksti–
Toisen painikkeen linkki button2UrlLinkki–
Tyyli button2VariantValinta– (Ensisijainen · Toissijainen)
Kohdistus alignValintaAlku (Alku · Keskitys · Loppu)
Teksti kuvan päällä overlayStyleValinta– (Laatikossa · Vaalea huntu, tumma teksti · Tumma huntu, vaalea teksti)
Tekstin luettavuus kuvan päällä textContrastValinta– (Automaattinen: huntua vahvistetaan, kunnes teksti erottuu (WCAG AA) · Pidä huntu sellaisenaan)
Korkeus heightValinta– (Automaattinen · Keskikorkea · Korkea · Erittäin korkea)
Aloitusosion asettelu layoutValinta– (Kuva tekstin yllä · Teksti kuvan päällä)
Aloitusosion leveys widthValinta– (Sisältöleveys · Reunasta reunaan)
Tehtäväkorttien nimi ruudunlukijalle tasksLabelTeksti–
Kortteja rivillä leveällä näytöllä taskColumnsLuku–
Tekstin vieressä visualValinta– (Kuva · Korttipino (kortit lohkoina))
Vaihtumisnopeus stackSpeedValinta– (Hidas · Tavallinen · Nopea)
Vihreä merkki keskimmäisessä kortissa stackCheckPäällä / pois–
Korttien tyyli stackLookValinta– (Lasi (läpikuultava, tummalle taustalle) · Tavallinen (vaalealle taustalle))
Korttien muoto stackShapeValinta– (Pyöristetty kortti · Pilleri (pienempi, kaikki kortit näkyvissä))
Listan nimi ruudunlukijalle stackLabelTeksti–
Kuvan päällä: otsikko overlayTitleTeksti–
Kuvan päällä: arvo overlayValueTeksti–
Kuvan päällä: lisätieto overlayNoteTeksti–
Kuva puhelimella mobileImageValinta– (Ennen tekstiä · Painikkeiden jälkeen)
Hakukenttä pääkuvassa heroSearchValinta– (Ei hakukenttää · Painikkeiden paikalla · Painikkeiden alla)
Hakukentän vihjeteksti heroSearchPlaceholderTeksti–
Hakuehdotukset kentän alla popularSearchesPitkä teksti–
Hakuehdotusten otsikko popularSearchesHeadingTeksti–
Tyyli designValinta– (Perus · Teksti ja kuva rinnakkain · Kuva ja teksti rinnakkain · Liukuväritausta · Iso otsikko, leveä kuva · Kortti kuvan päällä · Keskitetty, kehystetty kuva · Pääkuva ja tehtäväkortit)

Saavutettavuus

Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.

Käytössä 93 pohjassa

Kaikki 93 pohjaa

Tekstiosio

Osio text

Otsikko ja muotoiltua tekstiä: esittely, tarina tai ohje. Tyyleinä ingressi, kaksi palstaa, lainaus ja sivupalkki.

Tyylit (5)

Valitse tyyli, niin esimerkki yllä vaihtuu siihen. Sisältö pysyy samana, vain ulkoasu vaihtuu.

Asetukset (4)
AsetusMuokataanOletus
Otsikko headingTeksti–
Sisältö bodyMuotoiltu teksti–
Otsikon taso headingLevelValinta– (Väliotsikko (h2) · Sivun pääotsikko (h1))
Tyyli designValinta– (Perus · Ingressi keskellä · Kaksi palstaa · Iso lainaus · Otsikko sivussa)

Saavutettavuus

Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.

Käytössä 91 pohjassa

Kaikki 91 pohjaa

Kuva

Osio image

Yksi kuva koko leveydellä tai rajattuna, kuvatekstin ja vaihtoehtoisen tekstin kanssa.

Asetukset (11)
AsetusMuokataanOletus
Kuva imageKuva–
Vaihtoehtoinen teksti altTeksti–
Kuvateksti captionTeksti–
Leveys widthValintaSisällön leveys (Sisällön leveys · Koko leveys)
Suurenna klikattaessa zoomPäällä / poistrue
Kuvasuhde ratioValinta– (Alkuperäinen · 1:1 (neliö) · 4:3 · 3:2 · 16:9 (laajakuva) · 21:9 (leveä))
Rajauksen keskikohta focusRajauksen keskikohta–
Kuvan leveys (px) imageWidthLuku–
Kuvan korkeus (px) imageHeightLuku–
Kuvan tehtävät koot imageWidthsTeksti–
Kuvan leveys sivulla imageSizesTeksti–

Saavutettavuus

Jokaisella kuvalla on vaihtoehtoinen teksti tai se on merkitty koristeeksi. Suurennus ja kuvaselain toimivat näppäimistöllä (nuolet, Esc) ja kertovat kohdan (”Kuva 2 / 5”). Vain ensimmäinen näkyvä kuva ladataan heti.

Käytössä 2 pohjassa

Asettelualue

Osio grid

Vapaa asettelualue, johon lisätään lohkoja riveihin, palstoihin tai ruudukkoon. Useimmat sivut rakentuvat näistä.

Tyylit (4)

Valitse tyyli, niin esimerkki yllä vaihtuu siihen. Sisältö pysyy samana, vain ulkoasu vaihtuu.

Asetukset (16)
AsetusMuokataanOletus
Asettelu layoutValintaRuudukko (Ruudukko · Tasojärjestys · Korttikaruselli (vaakavieritys) · Vapaa asettelu · Päällekkäin (kerrokset))
Sarakkeet columnsLuku3
Sarakeleveydet columnWidthsTeksti–
Suunta directionValinta– (Vaaka · Pysty)
Väli gapTeksti{space.md}
Päällekkäisyys overlapAmountValinta– (Vähän · Keskiverto · Paljon)
Edessä overlapFrontValinta– (Toinen lohko (esim. kuva tekstin päällä) · Ensimmäinen lohko)
Pystykohdistus overlapAlignValinta– (Alku · Keskitys · Loppu)
Otsikko headingTeksti–
Esittely introMuotoiltu teksti–
Otsikon paikka headAlignValinta– (Keskellä · Vasemmalla)
Alapainikkeen teksti buttonLabelTeksti–
Painikkeen linkki buttonUrlLinkki–
Alapainikkeen tyyli buttonVariantValinta– (Ensisijainen · Toissijainen · Reunaviiva)
Tyyli designValinta– (Perus · Varjostetut kortit · Reunaviivakortit · Kuvakortit)
Korostus osoitettaessa cardHighlightValinta– (Ei korostusta · Nosto · Reunaväri · Nosto ja reunaväri)

Saavutettavuus

Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.

Käytössä 94 pohjassa

Kaikki 94 pohjaa

Toimintakehote

Osio cta

Toimintakehote: lyhyt kehotus ja painike, joka vie varaamaan, ostamaan tai ottamaan yhteyttä.

Tyylit (4)

Valitse tyyli, niin esimerkki yllä vaihtuu siihen. Sisältö pysyy samana, vain ulkoasu vaihtuu.

Asetukset (9)
AsetusMuokataanOletus
Otsikko headingTekstiOtsikko
Teksti bodyPitkä teksti–
Painikkeen teksti buttonLabelTeksti–
Painikkeen linkki buttonUrlLinkki–
Toisen painikkeen teksti button2LabelTeksti–
Toisen painikkeen linkki button2UrlLinkki–
Asettelu layoutValintaKeskitetty (Keskitetty · Teksti vasemmalla, painikkeet oikealla)
Tyyli variantValintaKorostusväri (Ei taustaa · Kortti · Korostusväri)
Tyyli designValinta– (Perus · Liukuväri · Iso otsikko ja viiva · Katkoviivareunus)

Saavutettavuus

Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.

Käytössä 90 pohjassa

Kaikki 90 pohjaa

Kuva ja teksti vuorotellen

Osio featureRows

Kuva ja teksti vuorotellen vasemmalla ja oikealla: palvelut tai ominaisuudet esiteltynä rivi kerrallaan.

Tyylit (4)

Valitse tyyli, niin esimerkki yllä vaihtuu siihen. Sisältö pysyy samana, vain ulkoasu vaihtuu.

Asetukset (7)
AsetusMuokataanOletus
Otsikko headingTeksti–
Esittely introMuotoiltu teksti–
Kuvan puoli imageSideValintaVuorotellen (Vuorotellen · Aina vasemmalla · Aina oikealla)
Asettelu layoutValinta– (Rivit allekkain · Ominaisuudet kuvan ympärillä)
Keskikuva (kuvan ympärillä -asettelu) centerImageKuva–
Vaihtoehtoinen teksti centerImageAltTeksti–
Tyyli designValinta– (Perus · Kortit · Kuvan takana värilaatta · Numeroidut)

Saavutettavuus

Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.

Bento-ruudukko

Osio bento

Eri kokoisista ruuduista koottu ruudukko, jossa nostot erottuvat kooltaan ja taustaltaan.

Asetukset (3)
AsetusMuokataanOletus
Otsikko headingTeksti–
Esittely introMuotoiltu teksti–
Sarakkeet columnsLuku3

Saavutettavuus

Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.

Käytössä 1 pohjassa

Kuvakelaatikot

Osio iconBoxes

Kuvake, otsikko ja lyhyt teksti rinnakkain: palvelut, edut tai askeleet yhdellä silmäyksellä.

Tyylit (8)

Valitse tyyli, niin esimerkki yllä vaihtuu siihen. Sisältö pysyy samana, vain ulkoasu vaihtuu.

Asetukset (4)
AsetusMuokataanOletus
Otsikko headingTeksti–
Sarakkeet columnsLuku3
Tyyli designValinta– (Perus · Kortit · Kuvake vieressä · Numeroidut vaiheet · Kuvakkeet ympyröissä · Otsikko sivussa · Pikalinkit · Tiivis lista)
Korostus osoitettaessa cardHighlightValinta– (Ei korostusta · Nosto · Reunaväri · Nosto ja reunaväri)

Saavutettavuus

Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.

Käytössä 91 pohjassa

Kaikki 91 pohjaa

Liukuva teksti (marquee)

Osio textMarquee

Vaakasuunnassa liukuva tekstinauha iskulauseille tai yhteistyökumppaneille. Liike pysähtyy, kun kävijä on pyytänyt vähemmän liikettä.

Asetukset (3)
AsetusMuokataanOletus
Tekstit (yksi riville) itemsPitkä tekstiIlmainen pysäköinti Avoinna joka päivä Kotimain…
Nauhan nopeus speedValintaTavallinen (Hidas · Tavallinen · Nopea)
Tekstin koko sizeValintaTavallinen (Tavallinen · Suuri)

Saavutettavuus

Ei automaattista liikettä oletuksena. Jos omistaja kytkee liikkeen päälle, Tauko-painike on ensimmäinen ohjain ja prefers-reduced-motion pysäyttää liikkeen aina (WCAG 2.2.2). Ohjaimilla on suomenkieliset nimet.

Käytössä 0 pohjassa

Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.

Sivua ei löytynyt (404)

Osio notFound

Sivua ei löytynyt -näkymä: selitys, haku tai linkit ja painike etusivulle.

Asetukset (9)
AsetusMuokataanOletus
Virhekoodi codeTeksti404
Otsikko headingTekstiSivua ei löytynyt
Teksti bodyPitkä teksti–
Painikkeen teksti buttonLabelTeksti–
Painikkeen linkki buttonUrlLinkki–
Toisen painikkeen teksti button2LabelTeksti–
Toisen painikkeen linkki button2UrlLinkki–
Linkkilistan otsikko linksHeadingTeksti–
Usein etsityt sivut linksPitkä teksti–

Saavutettavuus

Otsikot noudattavat sivun otsikkotasoja, kuvan vaihtoehtoinen teksti annetaan editorissa, ja värit tulevat teeman arvoista, joiden kontrasti tarkistetaan WCAG AA -tasolle. Ei liikettä eikä ajastettua sisältöä.

Käytössä 0 pohjassa

Mikään gallerian pohja ei vielä käytä tätä. Sen saa sivulle editorin Lisää osio -kirjastosta.