Grunder · Komponenter

Hero

Sektion hero

Sidans första sektion: stor rubrik, kort presentation, en eller två knappar och en bild bredvid, i bakgrunden eller i ett kort. I stilen med uppgiftskort är blocken besökarens vanligaste uppgifter: en länk per kort, staplade på telefon.

Exempel Öppna i en ny flik

Stilar (8)

Välj en stil så byter exemplet ovan till den. Innehållet förblir detsamma, bara utseendet ändras.

Inställningar (40)

Inställning	Redigeras som	Standard
Heading `heading`	Text	Heading
Rubrikens framhävda slut `headingAccent`	Text	–
Märke ovanför rubriken `badge`	Text	–
Subheading `subheading`	Text	–
Image `image`	Bild	–
Alternative text `imageAlt`	Text	–
Bildens beskärning `imageFocus`	Val	– (Mitten · Övre delen syns (personer) · Nedre delen syns)
Image width (px) `imageWidth`	Tal	–
Image height (px) `imageHeight`	Tal	–
Bildstorlekar som skapas `imageWidths`	Text	800,1200,1600
Bildens bredd på sidan `imageSizes`	Text	100vw
Button label `buttonLabel`	Text	–
Button link `buttonUrl`	Länk	–
Style `buttonVariant`	Val	– (Primary · Secondary)
Andra knappens text `button2Label`	Text	–
Andra knappens länk `button2Url`	Länk	–
Style `button2Variant`	Val	– (Primary · Secondary)
Alignment `align`	Val	Start (Start · Center · End)
Text över bilden `overlayStyle`	Val	– (I en ruta · Ljus slöja, mörk text · Mörk slöja, ljus text)
Text på bilden `textContrast`	Val	– (Automatiskt: slöjan förstärks tills texten syns (WCAG AA) · Behåll slöjan som den är)
Höjd `height`	Val	– (Automatisk · Medelhög · Hög · Extra hög)
Startsektionens layout `layout`	Val	– (Bild ovanför text · Text över bild)
Startsektionens bredd `width`	Val	– (Innehållsbredd · Kant till kant)
Uppgiftskortens namn för skärmläsare `tasksLabel`	Text	–
Kort per rad på bred skärm `taskColumns`	Tal	–
Bredvid texten `visual`	Val	– (Bild · Kortstapel (kort som block))
Hastighet `stackSpeed`	Val	– (Långsam · Normal · Snabb)
Grön bock på mittersta kortet `stackCheck`	På / av	–
Kortstil `stackLook`	Val	– (Glas (genomskinlig, för mörk bakgrund) · Enkel (för ljus bakgrund))
Kortens form `stackShape`	Val	– (Rundat kort · Piller (mindre, alla kort syns))
Listans namn för skärmläsare `stackLabel`	Text	–
På bilden: rubrik `overlayTitle`	Text	–
På bilden: värde `overlayValue`	Text	–
På bilden: tilläggsinfo `overlayNote`	Text	–
Bild på mobilen `mobileImage`	Val	– (Före texten · Efter knapparna)
Sökfält i huvudbilden `heroSearch`	Val	– (Inget sökfält · I stället för knapparna · Under knapparna)
Sökfältets ledtext `heroSearchPlaceholder`	Text	–
Sökförslag under fältet `popularSearches`	Lång text	–
Sökförslagens rubrik `popularSearchesHeading`	Text	–
Stil `design`	Val	– (Grund · Text och bild bredvid varandra · Bild och text bredvid varandra · Toningsbakgrund · Stor rubrik, bred bild · Kort på bilden · Centrerad, inramad bild · Huvudbild och uppgiftskort)

Används i 93 mallar

Alla 93 mallar

Text section

Sektion text

Rubrik och formaterad text: presentation, berättelse eller instruktion. Stilar: ingress, två spalter, citat och sidofält.

Exempel Öppna i en ny flik

Stilar (5)

Välj en stil så byter exemplet ovan till den. Innehållet förblir detsamma, bara utseendet ändras.

Inställningar (4)

Inställning	Redigeras som	Standard
Heading `heading`	Text	–
Body `body`	Formaterad text	–
Rubriknivå `headingLevel`	Val	– (Mellanrubrik (h2) · Sidans huvudrubrik (h1))
Stil `design`	Val	– (Grund · Ingress i mitten · Två spalter · Stort citat · Rubrik vid sidan)

Används i 91 mallar

Alla 91 mallar

Image

Sektion image

En enda bild i full bredd eller beskuren, med bildtext och alternativ text.

Exempel Öppna i en ny flik

Inställningar (11)

Inställning	Redigeras som	Standard
Image `image`	Bild	–
Alternative text `alt`	Text	–
Caption `caption`	Text	–
Width `width`	Val	Content width (Content width · Full width)
Förstora vid klick `zoom`	På / av	true
Bildformat `ratio`	Val	– (Original · 1:1 (kvadrat) · 4:3 · 3:2 · 16:9 (bredbild) · 21:9 (bred))
Beskärningens fokus `focus`	Beskärningens mittpunkt	–
Image width (px) `imageWidth`	Tal	–
Image height (px) `imageHeight`	Tal	–
Bildstorlekar som skapas `imageWidths`	Text	–
Bildens bredd på sidan `imageSizes`	Text	–

Används i 2 mallar

Grid

Sektion grid

Ett fritt layoutområde där block placeras i rader, spalter eller rutnät. De flesta sidor byggs av dessa.

Exempel Öppna i en ny flik

Stilar (4)

Välj en stil så byter exemplet ovan till den. Innehållet förblir detsamma, bara utseendet ändras.

Inställningar (16)

Inställning	Redigeras som	Standard
Layout `layout`	Val	Grid (Grid · Lagerordning · Kortkarusell (horisontell scroll) · Fri placering · Överlappande (lager))
Columns `columns`	Tal	3
Sarakeleveydet `columnWidths`	Text	–
Direction `direction`	Val	– (Row · Column)
Gap `gap`	Text	{space.md}
Överlappning `overlapAmount`	Val	– (Lite · Medel · Mycket)
Framför `overlapFront`	Val	– (Andra blocket (t.ex. bild över texten) · Första blocket)
Vertikal justering `overlapAlign`	Val	– (Start · Center · End)
Heading `heading`	Text	–
Introduktion `intro`	Formaterad text	–
Rubrikens placering `headAlign`	Val	– (Centrerad · Vänster)
Text på knappen nederst `buttonLabel`	Text	–
Button link `buttonUrl`	Länk	–
Stil på knappen nederst `buttonVariant`	Val	– (Primary · Secondary · Kontur)
Stil `design`	Val	– (Grund · Skuggade kort · Kort med kant · Bildkort)
Markering vid pekning `cardHighlight`	Val	– (Ingen markering · Lyft · Kantfärg · Lyft och kantfärg)

Används i 94 mallar

Alla 94 mallar

Uppmaning

Sektion cta

En uppmaning: en kort uppmaning och en knapp för att boka, köpa eller ta kontakt.

Exempel Öppna i en ny flik

Stilar (4)

Välj en stil så byter exemplet ovan till den. Innehållet förblir detsamma, bara utseendet ändras.

Inställningar (9)

Inställning	Redigeras som	Standard
Heading `heading`	Text	Otsikko
Text `body`	Lång text	–
Button label `buttonLabel`	Text	–
Button link `buttonUrl`	Länk	–
Andra knappens text `button2Label`	Text	–
Andra knappens länk `button2Url`	Länk	–
Layout `layout`	Val	Centrerad (Centrerad · Text till vänster, knappar till höger)
Style `variant`	Val	Accentfärg (Ingen bakgrund · Kort · Accentfärg)
Stil `design`	Val	– (Grund · Toning · Stor rubrik och linje · Streckad kant)

Används i 90 mallar

Alla 90 mallar

Bild och text växelvis

Sektion featureRows

Bild och text växelvis till vänster och höger: tjänster eller egenskaper presenterade en rad i taget.

Exempel Öppna i en ny flik

Stilar (4)

Välj en stil så byter exemplet ovan till den. Innehållet förblir detsamma, bara utseendet ändras.

Inställningar (7)

Inställning	Redigeras som	Standard
Heading `heading`	Text	–
Introduktion `intro`	Formaterad text	–
Bildens sida `imageSide`	Val	Växelvis (Växelvis · Alltid till vänster · Alltid till höger)
Layout `layout`	Val	– (Rader under varandra · Egenskaper runt en bild)
Mittbild (layouten runt en bild) `centerImage`	Bild	–
Alternative text `centerImageAlt`	Text	–
Stil `design`	Val	– (Grund · Kort · Färgplatta bakom bilden · Numrerade)

Används i 70 mallar

Alla 70 mallar

Bento-rutnät

Sektion bento

Ett rutnät av rutor i olika storlekar, där lyften sticker ut genom storlek och bakgrund.

Exempel Öppna i en ny flik

Inställningar (3)

Inställning	Redigeras som	Standard
Heading `heading`	Text	–
Introduktion `intro`	Formaterad text	–
Columns `columns`	Tal	3

Används i 1 mallar

Kort- och betalapp

Ikonrutor

Sektion iconBoxes

Ikon, rubrik och kort text sida vid sida: tjänster, fördelar eller steg i en blick.

Exempel Öppna i en ny flik

Stilar (8)

Välj en stil så byter exemplet ovan till den. Innehållet förblir detsamma, bara utseendet ändras.

Inställningar (4)

Inställning	Redigeras som	Standard
Heading `heading`	Text	–
Columns `columns`	Tal	3
Stil `design`	Val	– (Grund · Kort · Ikon bredvid · Numrerade steg · Ikoner i cirklar · Rubrik vid sidan · Snabblänkar · Kompakt lista)
Markering vid pekning `cardHighlight`	Val	– (Ingen markering · Lyft · Kantfärg · Lyft och kantfärg)

Används i 91 mallar

Alla 91 mallar

Rullande text (marquee)

Sektion textMarquee

Ett textband som glider i sidled för slogans eller partner. Det stannar när besökaren har bett om mindre rörelse.

Exempel Öppna i en ny flik

Inställningar (3)

Inställning	Redigeras som	Standard
Texter (en per rad) `items`	Lång text	Ilmainen pysäköinti Avoinna joka päivä Kotimain…
Bandets hastighet `speed`	Val	Normal (Långsam · Normal · Snabb)
Textstorlek `size`	Val	Normal (Normal · Stor)

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.

Sidan hittades inte (404)

Sektion notFound

Vyn sidan hittades inte: en förklaring, länkar eller sök och en knapp till startsidan.

Exempel Öppna i en ny flik

Inställningar (9)

Inställning	Redigeras som	Standard
Felkod `code`	Text	404
Heading `heading`	Text	Sivua ei löytynyt
Text `body`	Lång text	–
Button label `buttonLabel`	Text	–
Button link `buttonUrl`	Länk	–
Andra knappens text `button2Label`	Text	–
Andra knappens länk `button2Url`	Länk	–
Länklistans rubrik `linksHeading`	Text	–
Sidor som ofta söks `links`	Lång 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.

Hero #

Stilar (8)

Tillgänglighet

Används i 93 mallar

Text section #

Stilar (5)

Tillgänglighet

Används i 91 mallar

Image #

Tillgänglighet

Används i 2 mallar

Grid #

Stilar (4)

Tillgänglighet

Används i 94 mallar

Uppmaning #

Stilar (4)

Tillgänglighet

Används i 90 mallar

Bild och text växelvis #

Stilar (4)

Tillgänglighet

Används i 70 mallar

Bento-rutnät #

Tillgänglighet

Används i 1 mallar

Ikonrutor #

Stilar (8)

Tillgänglighet

Används i 91 mallar

Rullande text (marquee) #

Tillgänglighet

Används i 0 mallar

Sidan hittades inte (404) #

Tillgänglighet

Används i 0 mallar

Hero

Text section

Image

Grid

Uppmaning

Bild och text växelvis

Bento-rutnät

Ikonrutor

Rullande text (marquee)

Sidan hittades inte (404)