Omasivusto.fi
Komponenter· Sektionernas poster

Komponenter

Sektionernas poster

Block som lever i en viss sektion: dragspelspost, flik, bild, prisplan, omdöme och teammedlem.

21 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.

Haitarin kohta

Block Prova accordionItem

En dragspelspost: en rubrik och innehållet som öppnas under den i dragspelssektionen.

Inställningar (3)
InställningRedigeras somStandard
Heading headingTextOtsikko
Body contentFormaterad textLyhyt sisältö.
Ikon iconIkon– (Telefon · E-post · Plats · Kalender · Klocka · Personer · Stjärna · Hjärta · Bock · Pil höger · Facebook · Instagram · YouTube · LinkedIn · X (Twitter) · Biljett · Pokal · Hantel · Sax · Bestick · Hem · Info · Obs · Spela · Paus · Sök · Meny · Stäng · Plus · Minus · Pil ner · Extern länk · Ladda ner · Dela · Kamera · Bild · Citat · Glitter · Blixt · Jordglob · Skiftnyckel · Bil · Sköld · Lastbil · Löv · Droppe · Nyckel · Kod · Server · Moln · Lås · Bärbar dator · Cykel · Batteri · Wi-Fi · Projektor · Skärm · Mikrofon · Ljudanläggning · Parkering · Tillgänglig · Kaffe och servering · Luftkonditionering · Dagsljus · Videokonferens · Scen)

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 90 mallar

Alla 90 mallar

Uppgift i minneslistan

Block Prova dateChecklistTask

En uppgift i checklistan: en uppgift och dess tidpunkt i förhållande till det valda datumet. Uppgifterna ligger inne i checklistan.

Inställningar (13)
InställningRedigeras somStandard
Uppgift titleTextUusi tehtävä
Lista phaseValFöre dagen (Före dagen · På dagen eller ta med · Efter dagen)
Tidigast, dagar earliestDaysTal–
Senast, dagar latestDaysTal–
Grund för tidpunkten deadlineKindValFörslag (Förslag · Tidsfrist)
Tidpunkt i ord timingText–
Visa bara när whenText–
Body detailsFormaterad text–
Länktext linkLabelText–
Länk linkUrlLänk–
Källa sourceNameText–
Källans adress sourceUrlLänk–
Kontrollerad reviewedAtText–

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älilehti

Block Prova tabItem

En flik: en flik i fliksektionen med rubrik och innehåll.

Inställningar (7)
InställningRedigeras somStandard
Välilehden otsikko titleTextVälilehti
Välilehden sisältö bodyFormaterad textSisältö.
Ikon iconIkon– (Telefon · E-post · Plats · Kalender · Klocka · Personer · Stjärna · Hjärta · Bock · Pil höger · Facebook · Instagram · YouTube · LinkedIn · X (Twitter) · Biljett · Pokal · Hantel · Sax · Bestick · Hem · Info · Obs · Spela · Paus · Sök · Meny · Stäng · Plus · Minus · Pil ner · Extern länk · Ladda ner · Dela · Kamera · Bild · Citat · Glitter · Blixt · Jordglob · Skiftnyckel · Bil · Sköld · Lastbil · Löv · Droppe · Nyckel · Kod · Server · Moln · Lås · Bärbar dator · Cykel · Batteri · Wi-Fi · Projektor · Skärm · Mikrofon · Ljudanläggning · Parkering · Tillgänglig · Kaffe och servering · Luftkonditionering · Dagsljus · Videokonferens · Scen)
Etikett (t.ex. Tillägg) tagText–
Image imageBild–
Alternative text imageAltText–
Veckodag weekdayVal– (Enligt rubriken · måndag · tisdag · onsdag · torsdag · fredag · lördag · söndag)

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.

Karusellikuva

Block Prova carouselSlide

En karusellbild: en bild med rubrik och knapp.

Inställningar (8)
InställningRedigeras somStandard
Heading headingTextKohde
Text textLång text–
Image imageBild–
Alternative text imageAltText–
Button link urlLänk#
Button label buttonLabelText–
Bildstorlekar som skapas imageWidthsText800,1200,1600
Bildens bredd på sidan imageSizesText100vw

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.

Ikonruta

Block iconBoxItem

En ikonruta: ikon, rubrik och text i ikonrutesektionen.

Inställningar (5)
InställningRedigeras somStandard
Ikon iconIkonStjärna (Telefon · E-post · Plats · Kalender · Klocka · Personer · Stjärna · Hjärta · Bock · Pil höger · Facebook · Instagram · YouTube · LinkedIn · X (Twitter) · Biljett · Pokal · Hantel · Sax · Bestick · Hem · Info · Obs · Spela · Paus · Sök · Meny · Stäng · Plus · Minus · Pil ner · Extern länk · Ladda ner · Dela · Kamera · Bild · Citat · Glitter · Blixt · Jordglob · Skiftnyckel · Bil · Sköld · Lastbil · Löv · Droppe · Nyckel · Kod · Server · Moln · Lås · Bärbar dator · Cykel · Batteri · Wi-Fi · Projektor · Skärm · Mikrofon · Ljudanläggning · Parkering · Tillgänglig · Kaffe och servering · Luftkonditionering · Dagsljus · Videokonferens · Scen)
Rubrik titleTextOtsikko
Body bodyFormaterad textKuvaus.
Länk linkLä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 91 mallar

Alla 91 mallar

Prispaket

Block pricingPlan

En prisplan: ett priskort med namn, pris och innehåll.

Inställningar (11)
InställningRedigeras somStandard
Paketnamn nameTextPaketti
Pris priceText0 €
Period periodText–
Funktioner featuresFormaterad textOminaisuudet.
Button label ctaLabelText–
Button link ctaUrlLänk–
Utvald highlightedPå / avfalse
Text på rekommendationsmärket featuredLabelText–
Årspris yearlyPriceText–
Period för årspris yearlyPeriodText–
Tilläggsuppgift om årspriset yearlyNoteText–

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.

Logotyp

Block logoItem

En logotyp: en logotyp i logotypsektionen, vid behov som länk.

Inställningar (3)
InställningRedigeras somStandard
Logotypens bild imageBild–
Namn (visas om bild saknas) nameTextKumppani
Länk urlLänk–

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.

Ruta

Block bentoItem

En ruta: en ruta i bento-rutnätet med storlek, bakgrund och länk.

Stilar (7)

Alla stilar visas sida vid sida i exemplet: Kort, Accentfärg, Bild som bakgrund, Mörk, Mint, Himmelsblå, Solgul

Inställningar (8)
InställningRedigeras somStandard
Ikon iconIkon– (Telefon · E-post · Plats · Kalender · Klocka · Personer · Stjärna · Hjärta · Bock · Pil höger · Facebook · Instagram · YouTube · LinkedIn · X (Twitter) · Biljett · Pokal · Hantel · Sax · Bestick · Hem · Info · Obs · Spela · Paus · Sök · Meny · Stäng · Plus · Minus · Pil ner · Extern länk · Ladda ner · Dela · Kamera · Bild · Citat · Glitter · Blixt · Jordglob · Skiftnyckel · Bil · Sköld · Lastbil · Löv · Droppe · Nyckel · Kod · Server · Moln · Lås · Bärbar dator · Cykel · Batteri · Wi-Fi · Projektor · Skärm · Mikrofon · Ljudanläggning · Parkering · Tillgänglig · Kaffe och servering · Luftkonditionering · Dagsljus · Videokonferens · Scen)
Rubrik titleTextOtsikko
Body bodyFormaterad textKuvaus.
Image imageBild–
Alternative text imageAltText–
Länk urlLänk–
Rutans storlek spanValLiten (Liten · Bred (två kolumner) · Hög (två rader) · Stor (två kolumner och rader))
Style styleValKort (Kort · Accentfärg · Bild som bakgrund · Mörk · Mint · Himmelsblå · Solgul)

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 1 mallar

Rad med bild och text

Block featureRow

En bild–text-rad: en rad i sektionen bild och text växelvis.

Inställningar (12)
InställningRedigeras somStandard
Image imageBild–
Alternative text imageAltText–
Överrubrik eyebrowText–
Rubrik titleTextOtsikko
Body bodyFormaterad textKuvaus.
Länktext linkLabelText–
Länk linkUrlLänk–
Förstora vid klick zoomPå / av–
Video file URL videoLänk–
Autoplay (muted) videoAutoplayPå / av–
Spela bara när videon syns playInViewPå / av–
Ram frameVal– (Ingen ram · Webbläsare · Telefon · Fönster)

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.

Omdöme

Block testimonialItem

Ett omdöme: en kunds citat, namn, roll, bild och stjärnor.

Inställningar (5)
InställningRedigeras somStandard
Omdöme quoteLång textKirjoita asiakkaan palaute tähän.
Namn nameTextAsiakas
Roll eller titel roleText–
Image imageBild–
Stjärnor (0–5) ratingTal5

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.

Person

Block teamMember

En person: bild, namn, roll och kontaktuppgifter i teamsektionen.

Inställningar (10)
InställningRedigeras somStandard
Image imageBild–
Namn nameTextEtunimi Sukunimi
Roll eller titel roleTextTehtävänimike
Presentation bioLång text–
Email emailText–
Phone phoneText–
Språk languagesText–
Specialkunnande (kommaseparerat) specialitiesText–
Bokningslänk bookingUrlLänk–
Text på bokningsknappen bookingLabelText–

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.

Förtroendemärke

Block trustBadge

Ett förtroendemärke: ett certifikat eller medlemskap med bild.

Inställningar (6)
InställningRedigeras somStandard
Märke kindValPålitlig Partner (Luotettava Kumppani) (Pålitlig Partner (Luotettava Kumppani) · Kreditbetyg (t.ex. AAA) · Nyckelflaggan (Avainlippu) · ISO 9001 (kvalitet) · ISO 14001 (miljö) · Tukes: registrerad elinstallatör · Yrkesperson inom fastighetsbranschen · RALA-kompetens · Certifierad yrkesperson · Medlem i branschförbundet · Eget märke)
Eget namn labelText–
Precisering detailText–
Kontrollänk verifyUrlLänk–
Egen bild imageBild–
Ikon iconIkon– (Telefon · E-post · Plats · Kalender · Klocka · Personer · Stjärna · Hjärta · Bock · Pil höger · Facebook · Instagram · YouTube · LinkedIn · X (Twitter) · Biljett · Pokal · Hantel · Sax · Bestick · Hem · Info · Obs · Spela · Paus · Sök · Meny · Stäng · Plus · Minus · Pil ner · Extern länk · Ladda ner · Dela · Kamera · Bild · Citat · Glitter · Blixt · Jordglob · Skiftnyckel · Bil · Sköld · Lastbil · Löv · Droppe · Nyckel · Kod · Server · Moln · Lås · Bärbar dator · Cykel · Batteri · Wi-Fi · Projektor · Skärm · Mikrofon · Ljudanläggning · Parkering · Tillgänglig · Kaffe och servering · Luftkonditionering · Dagsljus · Videokonferens · Scen)

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.

Kort i stapeln

Block Prova cardStackItem

Kort i stapeln: en ikon och en kort text.

Inställningar (2)
InställningRedigeras somStandard
Ikon iconIkonBock (Telefon · E-post · Plats · Kalender · Klocka · Personer · Stjärna · Hjärta · Bock · Pil höger · Facebook · Instagram · YouTube · LinkedIn · X (Twitter) · Biljett · Pokal · Hantel · Sax · Bestick · Hem · Info · Obs · Spela · Paus · Sök · Meny · Stäng · Plus · Minus · Pil ner · Extern länk · Ladda ner · Dela · Kamera · Bild · Citat · Glitter · Blixt · Jordglob · Skiftnyckel · Bil · Sköld · Lastbil · Löv · Droppe · Nyckel · Kod · Server · Moln · Lås · Bärbar dator · Cykel · Batteri · Wi-Fi · Projektor · Skärm · Mikrofon · Ljudanläggning · Parkering · Tillgänglig · Kaffe och servering · Luftkonditionering · Dagsljus · Videokonferens · Scen)
Text textTextKortin teksti

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.

Visningskort

Block Prova showcaseItem

Visningskort: en bild, ett namn, en kort text och två knappar.

Inställningar (8)
InställningRedigeras somStandard
Image imageBild–
Alternative text imageAltText–
Rubrik titleTextKohde
Text textLång text–
Button link urlLänk#
Button label buttonLabelTextKatso
Länk för andra knappen url2Länk–
Text på andra knappen button2LabelText–

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.

Påstående

Block Prova vaalikoneStatement

Ett påstående: ett påstående i valkompassen och kandidatens svar med motivering.

Inställningar (4)
InställningRedigeras somStandard
Påstående textTextUusi väite
Mitt svar answerValJa (Ja · Nej)
Betydelse för mig weightValVanlig (Vanlig · Viktig · Mycket viktig)
Varför jag svarade så whyLång text–

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 1 mallar

Verksamhetsställe

Block location

Ett verksamhetsställe: ett ställes adress, öppettider och kontaktuppgifter.

Inställningar (8)
InställningRedigeras somStandard
Namn på verksamhetsställe nameTextToimipiste
Adress addressText–
Öppettider hoursLång text–
Phone phoneText–
Bokningssida bookingUrlLänk–
Button label bookingLabelText–
Latitud latTal–
Longitud lonTal–

Tillgänglighet

En karta laddas först på begäran eller efter samtycke, och adressen finns alltid även som text med en länk. Kartan kan hoppas över med tangentbordet.

Används i 1 mallar

Kontaktämne

Block contactTopic

Kontaktämne: ämnets namn, person eller team, telefon- och e-postlänkar, betjäningstider och formulärlänk.

Inställningar (9)
InställningRedigeras somStandard
Ämne topicTextAihe
Vilka ärenden ämnet gäller noteLång text–
Person eller team nameText–
Roll eller titel roleText–
Phone phoneText–
Email emailText–
Betjäningstider hoursLång text–
Formulärets adress formUrlLänk–
Button label formLabelText–

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 1 mallar

Punkt

Block Prova hotspot

En punkt: en markerad punkt i en bild med förklaring.

Inställningar (6)
InställningRedigeras somStandard
Punktens namn labelTextKohta
Text bodyLång text–
Vågrät position (%) xTal50
Lodrät position (%) yTal50
Button link linkUrlLänk–
Länktext linkLabelText–

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.

360°-bild

Block Prova panoramaScene

En 360°-bild: en scen i turen och dess övergångar till andra.

Inställningar (3)
InställningRedigeras somStandard
360°-bild srcLänk–
Platsens namn titleText–
Startriktning (grader) yawTal–

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.

Extern tjänst (knapp)

Block externalService

En extern tjänst: en knapp till en partners tjänst med logotyp.

Stilar (2)

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

Inställningar (7)
InställningRedigeras somStandard
Tjänst serviceValMyClub (MyClub · Jopox · Suomisport · Eventor (orientering) · Livelox (vägval) · Rastilippu · Hiihtokalenteri · Kilpailukalenteri (friidrott) · Resultattjänst (förbundens Torneopal) · Kalakortti.com (fiskelicenser) · Eräluvat.fi (jakt- och fisketillstånd) · Oma riista · apurahat.fi (Datalink) · Apuraha4 (apurahat.net, Aspicore) · Rimbert · AAPU · Annan tjänst)
Vem knappen är för roleVal– (Tjänstens egen text · Sökande (Ansök om stipendium) · Stipendiat · Utlåtandegivare (Ge ett utlåtande))
Label labelText–
URL urlLänk–
Style variantValPrimary (Primary · Secondary)
Visa tjänstens namn under knappen showNotePå / avtrue
Öppna i ny flik newTabPå / avtrue

Tillgänglighet

Navigeringen är ett namngivet landmärke, den aktuella sidan markeras med aria-current, menyknappen har ett tillstånd (aria-expanded) och en hopplänk leder till innehållet. Allt fungerar med tangentbordet och på en 390 px skärm utan sidledsrullning.