Omasivusto.fi
Komponenter· Element

Komponenter

Element

Små gränssnittsdelar: aviseringsruta, märke, förloppsindikator, steg, tidslinje, tabell, diagram och betyg.

27 komponenter

Exemplen ritas med det valda temat: en gallerimalls egna färger, typsnitt och rundningar, eller en mörk färdig palett.

Exemplen fungerar i testläge: inget sparas på en riktig webbplats, inga meddelanden skickas och betalningarna är testbetalningar.

Meddelanderuta

Block alert

En aviseringsruta: info, lyckat, varning eller fel med egen färg och ikon.

Stilar (4)

Alla stilar visas sida vid sida i exemplet: Info, Lyckat, Varning, Fel

Inställningar (3)
InställningRedigeras somStandard
Style variantValInfo (Info · Lyckat · Varning · Fel)
Rubrik titleTextHuomio
Text textLång textHalli on suljettu juhannuksena.

Tillgänglighet

Rubrikerna följer sidans rubriknivåer, bildens alternativa text anges i redigeraren och färgerna kommer från temats värden, vars kontrast kontrolleras till WCAG AA. Ingen rörelse och inget tidsstyrt innehåll.

Märke

Block badge

Ett märke: en liten etikett som Ny, Erbjudande eller Slutsåld.

Stilar (9)

Alla stilar visas sida vid sida i exemplet: Primär, Sekundär, Accent, Mörk, Kontur, Lyckad (grön), Varning (orange), Info, Fara (röd)

Inställningar (2)
InställningRedigeras somStandard
Text textTextUusi
Style variantValPrimär (Primär · Sekundär · Accent · Mörk · Kontur · Lyckad (grön) · Varning (orange) · Info · Fara (röd))

Tillgänglighet

Rubrikerna följer sidans rubriknivåer, bildens alternativa text anges i redigeraren och färgerna kommer från temats värden, vars kontrast kontrolleras till WCAG AA. Ingen rörelse och inget tidsstyrt innehåll.

Används i 2 mallar

Förloppsindikator

Block progress

En förloppsindikator: mål och läge, t.ex. en insamlings summa.

Inställningar (5)
InställningRedigeras somStandard
Label labelTextKeräys uuteen kenttään
Värde valueTal6400
Mål (högsta värde) maxTal10000
Enhet unitText€
Visning displayValStapel (Stapel · Cirkel)

Tillgänglighet

Tabeller har rubrikceller och bildtext, listor är riktiga listor och datum är i läsbar form. Diagrammets siffror finns även som text.

Används i 0 mallar

Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.

Nyckeltal

Block stat

Ett nyckeltal: en stor siffra och en förklaring.

Inställningar (3)
InställningRedigeras somStandard
Label labelTextKävijöitä vuodessa
Värde valueText42 000
Description descriptionText–

Tillgänglighet

Rubrikerna följer sidans rubriknivåer, bildens alternativa text anges i redigeraren och färgerna kommer från temats värden, vars kontrast kontrolleras till WCAG AA. Ingen rörelse och inget tidsstyrt innehåll.

Steg

Block steps

Steg: numrerat förlopp, t.ex. så fungerar bokningen.

Inställningar (2)
InställningRedigeras somStandard
Punkter itemsLång textValitse aika|Katso vapaat vuorot kalenterista M…
Orientation orientationValHorizontal (Horizontal · Vertical)

Tillgänglighet

Rubrikerna följer sidans rubriknivåer, bildens alternativa text anges i redigeraren och färgerna kommer från temats värden, vars kontrast kontrolleras till WCAG AA. Ingen rörelse och inget tidsstyrt innehåll.

Används i 0 mallar

Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.

Tidslinje

Block timeline

En tidslinje: årtal och händelser under varandra, t.ex. företagets historia.

Inställningar (1)
InställningRedigeras somStandard
Punkter itemsLång text2019|Halli avattiin|Kolme ensimmäistä kenttää 2…

Tillgänglighet

Rubrikerna följer sidans rubriknivåer, bildens alternativa text anges i redigeraren och färgerna kommer från temats värden, vars kontrast kontrolleras till WCAG AA. Ingen rörelse och inget tidsstyrt innehåll.

Nedräkning

Block countdown

En nedräkning till ett evenemang eller ett erbjudandes slut.

Inställningar (3)
InställningRedigeras somStandard
Heading headingTextTarjous päättyy
Sluttid (ISO) targetAtText2030-12-31T23:59:59Z
Text när klar labelsDoneTextPäättynyt

Tillgänglighet

Ingen automatisk rörelse som standard. Om ägaren slår på rörelse är Paus-knappen den första kontrollen och prefers-reduced-motion stoppar alltid rörelsen (WCAG 2.2.2). Kontrollerna har namn på webbplatsens språk.

Används i 2 mallar

Dynamiskt tal

Block dynamicNumber

Ett levande tal: webbplatsens levande data, som lediga platser eller medlemsantal.

Inställningar (4)
InställningRedigeras somStandard
Prefix prefixText–
Källa sourceValPlatser kvar (Platser kvar · Antal medlemmar · Anpassad)
Suffix suffixText–
Reservvärde fallbackTal0

Tillgänglighet

Tabeller har rubrikceller och bildtext, listor är riktiga listor och datum är i läsbar form. Diagrammets siffror finns även som text.

Används i 0 mallar

Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.

Före och efter-bild

Block Prova beforeAfter

En före–efter-bild: två bilder som jämförs med ett reglage.

Inställningar (9)
InställningRedigeras somStandard
Bild före beforeBild–
Beskrivning av bilden före beforeAltText–
Bild efter afterBild–
Beskrivning av bilden efter afterAltText–
Text på bilden (före) beforeLabelTextEnnen
Text på bilden (efter) afterLabelTextJälkeen
Avdelarens startläge (%) startTal50
Aspect ratio aspectVal16:9 (16:9 · 4:3 · 1:1 · 3:4)
Caption captionText–

Tillgänglighet

Varje bild har alternativ text eller är markerad som dekorativ. Förstoring och bildbläddraren fungerar med tangentbordet (pilar, Esc) och anger positionen (”Bild 2 av 5”). Bara den första synliga bilden laddas direkt.

Växlande rubrikord

Block textRotate

Ett växlande rubrikord: ett ord i rubriken byts mellan några alternativ.

Inställningar (7)
InställningRedigeras somStandard
Text före det växlande ordet beforeTextKotisivut
Växlande ord wordsLång textyhdistykselle yritykselle urheiluseuralle
Text efter det växlande ordet afterText–
Heading level levelValh2 (h1 · h2 · h3 · h4)
Alignment alignVal– (Start · Center · End)
Ordet byts (sekunders mellanrum) intervalTal3
Visa det växlande ordet i primärfärgen accentPå / avtrue

Tillgänglighet

Ingen automatisk rörelse som standard. Om ägaren slår på rörelse är Paus-knappen den första kontrollen och prefers-reduced-motion stoppar alltid rörelsen (WCAG 2.2.2). Kontrollerna har namn på webbplatsens språk.

Används i 0 mallar

Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.

Porträttgrupp

Block avatarGroup

En avatargrupp: små porträtt överlappande, t.ex. ett team eller deltagare.

Inställningar (14)
InställningRedigeras somStandard
Porträtt 1 image1Bild–
Beskrivning av porträtt 1 (t.ex. namnet) image1AltText–
Porträtt 2 image2Bild–
Beskrivning av porträtt 2 (t.ex. namnet) image2AltText–
Porträtt 3 image3Bild–
Beskrivning av porträtt 3 (t.ex. namnet) image3AltText–
Porträtt 4 image4Bild–
Beskrivning av porträtt 4 (t.ex. namnet) image4AltText–
Porträtt 5 image5Bild–
Beskrivning av porträtt 5 (t.ex. namnet) image5AltText–
Övriga (visas som +N) moreTal120
Text textTextYli 120 jäsentä pelaa meillä joka viikko
Bildernas storlek sizeValMedium (Liten · Medium · Large)
Alignment alignVal– (Start · Center · End)

Tillgänglighet

Rubrikerna följer sidans rubriknivåer, bildens alternativa text anges i redigeraren och färgerna kommer från temats värden, vars kontrast kontrolleras till WCAG AA. Ingen rörelse och inget tidsstyrt innehåll.

Används i 0 mallar

Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.

Tabell

Block dataTable

En tabell: rader och kolumner med rubrikceller, t.ex. en prislista eller ett schema.

Inställningar (7)
InställningRedigeras somStandard
Tabellens rubrik captionTextHinnasto
Rader rowsLång textPalvelu|Kesto|Hinta Perushuolto|45 min|49 € Laa…
Första raden är rubrikrad headerRowPå / avtrue
Första kolumnen är radens rubrik firstColumnHeaderPå / av–
Varannan rad randig stripedPå / avtrue
Besökaren kan sortera raderna enligt en kolumn sortablePå / avfalse
På telefon phoneValRulla i sidled (Rulla i sidled · Varje rad som ett kort)

Tillgänglighet

Tabeller har rubrikceller och bildtext, listor är riktiga listor och datum är i läsbar form. Diagrammets siffror finns även som text.

Diagram

Block chart

Ett diagram: stapel-, linje- eller cirkeldiagram av siffror, siffrorna även som text.

Inställningar (5)
InställningRedigeras somStandard
Diagrammets rubrik titleTextJäsenmäärä vuosittain
Diagramtyp typeValStaplar (Staplar · Linje · Ring (andelar))
Siffror dataLång text2022|180 2023|240 2024|310 2025|420
Enhet unitText–
Vad man ska lägga märke till i diagrammet descriptionText–

Tillgänglighet

Tabeller har rubrikceller och bildtext, listor är riktiga listor och datum är i läsbar form. Diagrammets siffror finns även som text.

Används i 0 mallar

Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.

Stjärnbetyg

Block rating

Ett stjärnbetyg med siffra, t.ex. 4,8 / 5.

Inställningar (6)
InställningRedigeras somStandard
Betyg (t.ex. 4,8) valueText4,8
Antal stjärnor maxTal5
Förklaring labelTextAsiakkaiden antama arvosana
Visa betyget som siffra showValuePå / avtrue
Storlek sizeValMedium (Liten · Medium · Large)
Alignment alignVal– (Start · Center · End)

Tillgänglighet

Rubrikerna följer sidans rubriknivåer, bildens alternativa text anges i redigeraren och färgerna kommer från temats värden, vars kontrast kontrolleras till WCAG AA. Ingen rörelse och inget tidsstyrt innehåll.

Används i 0 mallar

Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.

Kundomdömen (t.ex. Google)

Block reviews

Kundrecensioner, t.ex. från Google: stjärnor, text och recensentens namn.

Inställningar (8)
InställningRedigeras somStandard
Omdömenas källa sourceValEgna kundomdömen (Egna kundomdömen · Google-omdömen (Inställningar → Google-omdömen))
Heading headingTextAsiakkaiden kokemuksia
Varifrån omdömena kommer (t.ex. Google) sourceNameText–
Medelbetyg (t.ex. 4,8) ratingText4,8
Antal omdömen totalt countTal132
Omdömen reviewsLång textAnna K.|5|maaliskuu 2026|Varaaminen oli helppoa…
Adress där alla omdömen finns (t.ex. en Google-profil) profileUrlLänk–
Länktext linkLabelText–

Tillgänglighet

Rubrikerna följer sidans rubriknivåer, bildens alternativa text anges i redigeraren och färgerna kommer från temats värden, vars kontrast kontrolleras till WCAG AA. Ingen rörelse och inget tidsstyrt innehåll.

Används i 0 mallar

Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.

Etiketter (chips)

Block chips

Taggar: små rundade etiketter för ämnen eller egenskaper.

Stilar (3)

Alla stilar visas sida vid sida i exemplet: Mjuk bakgrund, Kontur, Hel färg

Inställningar (5)
InställningRedigeras somStandard
Punkter itemsLång textPadel Sulkapallo|/lajit/sulkapallo Tennis|/laji…
Gruppens namn för skärmläsare labelText–
Style variantValMjuk bakgrund (Mjuk bakgrund · Kontur · Hel färg)
Storlek sizeValMedium (Liten · Medium)
Alignment alignVal– (Start · Center · End)

Tillgänglighet

Rubrikerna följer sidans rubriknivåer, bildens alternativa text anges i redigeraren och färgerna kommer från temats värden, vars kontrast kontrolleras till WCAG AA. Ingen rörelse och inget tidsstyrt innehåll.

Rullgardinsknapp

Block Prova dropdown

En rullgardinsknapp: en knapp som öppnar en lista med länkar.

Stilar (3)

Alla stilar visas sida vid sida i exemplet: Primary, Secondary, Kontur

Inställningar (4)
InställningRedigeras somStandard
Button label labelTextValitse toimipiste
Punkter itemsLång textKeskusta|/toimipisteet/keskusta Länsi|/toimipis…
Style variantValPrimary (Primary · Secondary · Kontur)
Alignment alignVal– (Start · Center · End)

Tillgänglighet

Innehåll som öppnas är en knapp med namn och tillstånd (aria-expanded eller vald flik). Fungerar med tangentbordet: Tab flyttar, Enter och mellanslag öppnar, Esc stänger. Innehållet går att läsa även utan JavaScript.

Används i 0 mallar

Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.

Text med tilläggsinfo (tips)

Block Prova infoTip

Text med mer information: en förklaring öppnas som tips vid tryck.

Inställningar (2)
InställningRedigeras somStandard
Text textTextToimitus 5,90 €
Förklaring som öppnas från i-knappen tipLång textToimitamme arkisin 1–3 päivässä. Yli 60 euron t…

Tillgänglighet

Innehåll som öppnas är en knapp med namn och tillstånd (aria-expanded eller vald flik). Fungerar med tangentbordet: Tab flyttar, Enter och mellanslag öppnar, Esc stänger. Innehållet går att läsa även utan JavaScript.

Används i 0 mallar

Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.

Reglage för mörkt läge

Block Prova themeToggle

En brytare för mörkt läge: besökaren gör sidan ljus eller mörk.

Inställningar (2)
InställningRedigeras somStandard
Reglagets text labelTextTumma tila
Alignment alignValStart (Start · Center · End)

Tillgänglighet

Innehåll som öppnas är en knapp med namn och tillstånd (aria-expanded eller vald flik). Fungerar med tangentbordet: Tab flyttar, Enter och mellanslag öppnar, Esc stänger. Innehållet går att läsa även utan JavaScript.

Används i 0 mallar

Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.

Chattbubblor

Block Prova chat

Chattbubblor: en fråga–svar-konversation som bubblor, t.ex. vanliga frågor.

Inställningar (2)
InställningRedigeras somStandard
Meddelanden messagesLång textAsiakas|Hei! Onko teillä vapaita vuoroja lauant…
Gruppens namn för skärmläsare labelText–

Tillgänglighet

Varje fält har en synlig etikett, obligatoriska fält anges i text, fel läses upp och leder till fältet och autocomplete fyller i bekanta uppgifter. Pekytorna är minst 44 px.

Används i 0 mallar

Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.

Vändkort (flip card)

Block Prova flipCard

Ett vändkort: bild eller rubrik på framsidan, mer information på baksidan.

Inställningar (9)
InställningRedigeras somStandard
Image imageBild–
Alternative text imageAltText–
Framsidans rubrik frontTitleTextHieronta
Framsidans text frontTextLång text60 min · 69 €
Baksidans rubrik backTitleTextMitä hoitoon kuuluu?
Baksidans text backTextLång textLihashuolto koko keholle. Kerro toiveesi hoidon…
Länktext linkLabelTextVaraa aika
URL linkUrlLänk/ajanvaraus
Vändknappens text flipLabelText–

Tillgänglighet

Innehåll som öppnas är en knapp med namn och tillstånd (aria-expanded eller vald flik). Fungerar med tangentbordet: Tab flyttar, Enter och mellanslag öppnar, Esc stänger. Innehållet går att läsa även utan JavaScript.

Används i 0 mallar

Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.

Lottie-animation

Block lottie

En Lottie-animation: en lätt vektoranimation från en JSON-fil.

En Lottie-animation behöver en animationsfil; utan den visar exemplet en tom plats. Rörelsen stannar när besökaren har bett om mindre rörelse.

Inställningar (6)
InställningRedigeras somStandard
Lottie-fil (.json) srcLänk–
Beskrivning för skärmläsare labelText–
Stillbild (visas före laddning) posterBild–
Autoplay (muted) autoplayPå / avtrue
Loop loopPå / avtrue
Största bredd (px) maxWidthTal–

Tillgänglighet

Ingen automatisk rörelse som standard. Om ägaren slår på rörelse är Paus-knappen den första kontrollen och prefers-reduced-motion stoppar alltid rörelsen (WCAG 2.2.2). Kontrollerna har namn på webbplatsens språk.

Används i 0 mallar

Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.

3D-modell

Block Prova model3d

En 3D-modell: en produkt eller ett objekt kan vridas och zoomas i webbläsaren; den laddas först på begäran.

Ingen modell visas i exemplet eftersom en 3D-modell är webbplatsens egen uppladdade fil (glb); utan fil visas bara modellens platshållare.

Inställningar (5)
InställningRedigeras somStandard
3D-modell (GLB eller glTF) srcLänk–
Affisch posterBild–
Vilken produkt modellen visar altText–
Caption captionText–
Vrid automatiskt autoRotatePå / avfalse

Tillgänglighet

Varje bild har alternativ text eller är markerad som dekorativ. Förstoring och bildbläddraren fungerar med tangentbordet (pilar, Esc) och anger positionen (”Bild 2 av 5”). Bara den första synliga bilden laddas direkt.

Används i 0 mallar

Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.

Räknare

Block Prova calculator

En kalkylator som block: samma kalkylator som sektionen, i en spalt.

Inställningar (11)
InställningRedigeras somStandard
Heading headingTextLaske siivouksen hinta
Ingress introLång textValitse asunnon koko ja siivousväli, niin näet …
Fält inputsLång textpinta_ala | Asunnon pinta-ala | luku | min 20; …
Resultat outputsLång textkerta | Hinta-arvio käynniltä | max(69, pinta_a…
Anmärkning under priset disclaimerTextHinta-arvio, lopullinen hinta tarjouksessa.
Knappens text ctaLabelTextPyydä tarjous
Formulär som knappen öppnar ctaFormFormulär–
Eller sidan som knappen leder till ctaLinkLänk–
Moms vatValPriserna inkluderar moms (Ingen momsrad · Priserna inkluderar moms · Priser utan moms (moms 0 %))
Momssats (%) vatRateTal25.5
Formulärfält för sammanfattningen ctaSummaryFieldText–

Tillgänglighet

Varje fält har en synlig etikett, obligatoriska fält anges i text, fel läses upp och leder till fältet och autocomplete fyller i bekanta uppgifter. Pekytorna är minst 44 px.

Används i 0 mallar

Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.

Start för minneslista

Block Prova dateChecklistStart

Start för checklistan: besökaren väljer ett datum och knappen öppnar checklistans sida med datumet ifyllt.

Inställningar (4)
InställningRedigeras somStandard
Minneslistans sida urlLänk–
Dagens namn dateLabelText–
Knapptext buttonLabelText–
Länk utan dag linkLabelText–

Tillgänglighet

Varje fält har en synlig etikett, obligatoriska fält anges i text, fel läses upp och leder till fältet och autocomplete fyller i bekanta uppgifter. Pekytorna är minst 44 px.

Används i 0 mallar

Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.

Avbetalningsräknare

Block Prova financing

En avbetalningskalkylator som block, t.ex. bredvid en produkt eller bil.

Inställningar (24)
InställningRedigeras somStandard
Heading headingTextMaksa osissa
Ingress introLång textJaa ostoksen hinta tasaisiin kuukausieriin. Las…
Företagets roll lenderRoleVal– (Vi förmedlar kreditgivarens kredit (ombud) · Vi är själva kreditgivare)
Kreditgivare lenderText–
Prisets rubrik priceLabelTextOstoksen hinta
Val av pris priceControlValSifferfält (Sifferfält · Skjutreglage)
Exemplets pris (€) priceTal2000
Lägsta pris (€) priceMinTal200
Högsta pris (€) priceMaxTal20000
Prisets steg (€) priceStepTal50
Fråga om kontantinsats askDownPaymentPå / avfalse
Exemplets kontantinsats (€) downPaymentTal0
Kredittider (mån) termsText6, 12, 24, 36
Exemplets kredittid (mån) termTal12
Nominell ränta (% per år) rateTal7.9
Räntetyp rateTypeValFast (Fast · Rörlig)
Uppläggningsavgift (€) openingFeeTal39
Uppläggningsavgiften betalas openingFeeWhenValMed den första delbetalningen (Med den första delbetalningen · Läggs till krediten)
Konto- eller aviavgift (€/mån) monthlyFeeTal6
Anmärkning under priset disclaimerTextLaskelma on suuntaa antava. Luoton myöntää ja s…
Knappens text ctaLabelTextKysy lisää
Formulär som knappen öppnar ctaFormFormulär–
Eller sidan som knappen leder till ctaLinkLänk–
Formulärfält för sammanfattningen ctaSummaryFieldText–

Tillgänglighet

Varje fält har en synlig etikett, obligatoriska fält anges i text, fel läses upp och leder till fältet och autocomplete fyller i bekanta uppgifter. Pekytorna är minst 44 px.

Används i 0 mallar

Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.

Aviseringar

Block Prova pushNotices

En prenumeration på aviseringar som block i en spalt.

Inget prenumereras i förhandsvisningen: knappen berättar vad den gör på en riktig webbplats.

Inställningar (7)
InställningRedigeras somStandard
Heading headingText–
Förklaring ovanför knappen bodyLång text–
Button label buttonLabelText–
Integritetsnotis under knappen noteLång text–
Sida för nyhetsbrevet (alternativ) newsletterUrlLänk–
Länktext för nyhetsbrevet newsletterLabelText–
Layout layoutValLiten knapp (sidfot) (Kort · Enkel · Liten knapp (sidfot))

Tillgänglighet

Varje fält har en synlig etikett, obligatoriska fält anges i text, fel läses upp och leder till fältet och autocomplete fyller i bekanta uppgifter. Pekytorna är minst 44 px.

Används i 0 mallar

Ingen gallerimall använder detta ännu. Lägg till det på en sida från redigerarens bibliotek Lägg till sektion.