Omasivusto.fi
Komponenter· Block

Komponenter

Block

Grunddelarna som läggs in i sektioner: rubrik, text, bild, knapp, video, karta, inbäddning och formulär.

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

Heading

Block heading

En rubrik på nivåerna H1–H6. Nivån anger strukturen, storlek och stil kommer från temat.

Inställningar (4)
InställningRedigeras somStandard
Text textTextHeading
Heading level levelValh2 (h1 · h2 · h3 · h4 · h5 · h6)
Alignment alignVal– (Start · Center · End)
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.

Används i 91 mallar

Alla 91 mallar

Text

Block text

Ett kort textstycke utan formatering.

Inställningar (2)
InställningRedigeras somStandard
Text textText–
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.

Rich text

Block richtext

Formaterad text: fetstil, länkar, listor och citat.

Inställningar (1)
InställningRedigeras somStandard
Content htmlFormaterad text–

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.

Image

Block image

En bild med alternativ text, beskärning och förstoring.

Inställningar (15)
InställningRedigeras somStandard
Image srcBild–
Alternative text altText–
Caption captionText–
URL urlLänk–
Image width (px) widthTal–
Image height (px) heightTal–
Bildstorlekar som skapas widthsText480,768,1200,1600
Bildens bredd på sidan sizesText100vw
Ram frameVal– (Ingen ram · Webbläsare · Telefon · Fönster)
Form shapeVal– (Rektangel · Cirkel · Rundad · Hexagon)
Effekt under muspekaren hoverEffectVal– (Ingen effekt · Bilden förstoras · Svartvit, färger under muspekaren · Bilden vänds i 3D)
Förstora vid klick zoomPå / av–
Bildformat ratioVal– (Original · 1:1 (kvadrat) · 4:3 · 3:2 · 16:9 (bredbild) · 21:9 (bred))
Beskärningens fokus focusBeskärningens mittpunkt–
Ämne i galleriet categoryText–

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.

Button

Block button

En knapp som länk: primär, sekundär, kontur, lätt eller textlänk, vid behov med ikon.

Stilar (5)

Alla stilar visas sida vid sida i exemplet: Primary, Secondary, Kontur, Lätt (ingen bakgrund), Link

Inställningar (10)
InställningRedigeras somStandard
Label labelTextButton
URL urlLänk#
Style variantValPrimary (Primary · Secondary · Kontur · Lätt (ingen bakgrund) · Link)
Background color backgroundTemafärg–
Text color colorTemafärg–
Button size sizeVal– (Liten · Medium · Large)
Färg toneVal– (Huvudfärg · Sekundär färg · Accentfärg · Mörk (textfärg) · Ljus (bakgrundsfärg))
Hörn radiusVal– (Raka · Rundade · Helt rundade)
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)
Ikonens placering iconPositionVal– (Före texten · Efter texten)

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.

Knappgrupp

Block buttonGroup

En knappgrupp: flera knappar sida vid sida i samma stil.

Stilar (3)

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

Inställningar (4)
InställningRedigeras somStandard
Punkter itemsLång textVaraa vuoro|/varaa Hinnasto|/hinnasto Yhteystie…
Gruppens namn för skärmläsare labelText–
Style variantValPrimary (Primary · Secondary · Kontur)
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.

Spacer

Block spacer

Tomt mellanrum mellan block, storlek enligt temats avstånd.

Inställningar (1)
InställningRedigeras somStandard
Height (px) heightTal24

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.

Divider

Block divider

En horisontell linje som skiljer innehåll åt.

Inställningar (1)
InställningRedigeras somStandard
Thickness (px) thicknessTal1

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.

Container

Block container

En grupp: samlar block i en ruta med egen bakgrund, kant och layout.

Inställningar (2)
InställningRedigeras somStandard
Background color backgroundTemafärg–
Inramad ruta boxedPå / av–

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

Alla 87 mallar

Embed

Block embed

En inbäddning: YouTube, Vimeo, karta eller en tillåten extern tjänst, säkert i en ram.

En inbäddning (YouTube, karta, formulärtjänst) visas först med besökarens samtycke, så exemplet visar platsen för samtyckesfrågan.

Inställningar (4)
InställningRedigeras somStandard
Embed URL urlLänkhttps://www.youtube.com/embed/
Rubrik titleTextVideo
Aspect ratio aspectVal16:9 (16:9 · 4:3 · 1:1 · 3:4 · Hög (formulär/docs))
Inbäddningens höjd (px) heightTal–

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.

Karta

Block Prova map

En karta med adress: plattformens egen karta som laddas först när den syns.

Inställningar (6)
InställningRedigeras somStandard
Adress addressText–
Rubrik titleTextKartta
Aspect ratio aspectVal4:3 (16:9 · 4:3 · 1:1 · 3:4 · Hög (formulär/docs))
Karttjänst providerVal– (Webbplatsens val · OpenStreetMap (egen karta, inga kakor) · Google Maps (ber om lov))
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.

Video

Block Prova video

En video: egen fil eller YouTube/Vimeo, med omslagsbild och undertexter.

Inställningar (11)
InställningRedigeras somStandard
Video file URL srcLänk–
WebM-version (valfri) srcWebmLänk–
Poster image posterBild–
Caption captionText–
Autoplay (muted) autoplayPå / av–
Spela bara när videon syns playInViewPå / av–
Loop loopPå / av–
Show controls controlsPå / avtrue
Visningssätt displayVal– (Videon på sidan · Bild och uppspelningsknapp, videon öppnas ovanpå)
Uppspelningsknappens text buttonLabelText–
Ram frameVal– (Ingen ram · Webbläsare · Telefon · Fönster)

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.

Ljudfil

Block Prova audio

En ljudfil med spelare: ett prov, en podd eller en ljudguide.

Inställningar (3)
InställningRedigeras somStandard
Rubrik titleTextKuuntele näyte
Ljudfil srcLänk–
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.

Används i 2 mallar

Form

Block Prova form

Ett formulär som block: samma formulär som i formulärsektionen, i en spalt.

Inställningar (1)
InställningRedigeras somStandard
Form formIdFormulär–

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.

Appbutiker

Block appBadges

Appbutiker: appens länkar till App Store, Google Play och Microsoft Store som butikernas märken på besökarens språk; ägaren lägger in de officiella märkena, annars knappar.

Inställningar (14)
InställningRedigeras somStandard
Adress i App Store appStoreUrlLänk–
Adress i Google Play googlePlayUrlLänk–
Adress i Microsoft Store microsoftStoreUrlLänk–
Adress till webbversionen webAppUrlLänk–
Bild av App Store-märket appStoreImageBild–
Bild av Google Play-märket googlePlayImageBild–
Bild av Microsoft Store-märket microsoftStoreImageBild–
Layout layoutValI rad (I rad · Under varandra)
Justering alignValBörjan (Början · Mitten · Slutet)
Storlek sizeValNormal (Normal · Liten)
Visa QR-kod qrPå / av–
QR-kodens adress qrUrlLänk–
Text under koden qrCaptionText–
QR-koden visas qrShowVal– (Endast på bred skärm · Alltid, även på mobilen)

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.

Används i 1 mallar

Delningsknappar

Block shareButtons

Delningsknappar: dela sidan på Facebook, WhatsApp eller kopiera länken.

Inställningar (9)
InställningRedigeras somStandard
Rubrik labelText–
Text att dela textText–
Facebook facebookPå / avtrue
WhatsApp whatsappPå / avtrue
X xPå / avtrue
LinkedIn linkedinPå / avfalse
E-post emailPå / avtrue
Kopiera länk copyPå / avtrue
Alignment alignVal– (Start · Center · End)

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.

Används i 1 mallar

Nedladdningar

Block downloads

Nedladdningsbara filer som lista: namn, typ och storlek.

Inställningar (2)
InställningRedigeras somStandard
Rubrik titleText–
Punkter itemsLång textLehdistökuva, vaaka|/media/lehdistokuva-vaaka.j…

Tillgänglighet

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

Kodblock

Block code

Ett kodblock: exempelkod i fast teckenbredd med kopieringsknapp.

Inställningar (4)
InställningRedigeras somStandard
Kod eller text som den är codeLång textnpm install npm run dev
Rubrik (t.ex. filnamnet) titleTextAsennus
Visa en kopiera-knapp copyPå / avtrue
Radbryt långa rader wrapPå / avfalse

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.

QR-kod

Block qrCode

En QR-kod till en adress, till exempel på en utskrivbar affisch.

Inställningar (6)
InställningRedigeras somStandard
Koden öppnar targetValDen här sidan (Den här sidan · En annan adress (t.ex. bokningssida eller evenemang))
Adress urlLänk–
Text under koden labelText–
Visa adressen som text showUrlPå / avtrue
Storlek sizeValMedel (Liten · Medel · Stor)
Länkar för utskrift (SVG och PNG) downloadPå / avtrue

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

Innehållsförteckning

Block toc

En innehållsförteckning som samlar sidans rubriker till länkar.

Inställningar (3)
InställningRedigeras somStandard
Rubrik titleTextSisällys
Rubriker som tas med depthValEndast huvudrubriker (H2) (Endast huvudrubriker (H2) · Huvud- och underrubriker (H2 och H3))
Hålls synlig vid rullning (bred skärm) stickyPå / avfalse

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.

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.

Länklista

Block listGroup

En länklista: länkar under varandra med beskrivningar, t.ex. guider eller tjänster.

Stilar (2)

Alla stilar visas sida vid sida i exemplet: Lista med kantlinjer, Stort register (understrukna länkar)

Inställningar (2)
InställningRedigeras somStandard
Punkter itemsLång textHinnasto|/hinnasto|alk. 20 €/h Aukioloajat|/auk…
Style variantVal– (Lista med kantlinjer · Stort register (understrukna länkar))

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