Omasivusto.fi
Components· Blocks

Components

Blocks

The basic parts added inside sections: heading, text, image, button, video, map, embed and form.

23 components

The examples are rendered in the chosen theme: a gallery template's own colours, fonts and corners, or a dark ready-made palette.

The examples work in test mode: nothing is saved to a real site, no messages are sent and payments are test payments.

Heading

Block heading

A heading at levels H1–H6. The level tells the structure; size and style come from the theme.

Example Open in a new tab

Settings (4)
SettingEdited asDefault
Text textTextHeading
Heading level levelChoiceh2 (h1 · h2 · h3 · h4 · h5 · h6)
Alignment alignChoice– (Start · Center · End)
Icon iconIcon– (Phone · Email · Location · Calendar · Clock · People · Star · Heart · Check mark · Arrow right · Facebook · Instagram · YouTube · LinkedIn · X (Twitter) · Ticket · Trophy · Dumbbell · Scissors · Cutlery · Home · Info · Alert · Play · Pause · Search · Menu · Close · Plus · Minus · Chevron down · External link · Download · Share · Camera · Image · Quote · Sparkles · Lightning · Globe · Wrench · Car · Shield · Truck · Leaf · Drop · Key · Code · Server · Cloud · Lock · Laptop · Bicycle · Battery · Wi-Fi · Projector · Screen · Microphone · Sound system · Parking · Accessible · Coffee and catering · Air conditioning · Natural light · Video conferencing · Stage)

Accessibility

Headings follow the page's heading levels, an image's alternative text is given in the editor, and colours come from the theme's values, whose contrast is checked to WCAG AA. No motion and no timed content.

Used in 91 templates

All 91 templates

Text

Block text

A short paragraph without formatting.

Example Open in a new tab

Settings (2)
SettingEdited asDefault
Text textText–
Alignment alignChoice– (Start · Center · End)

Accessibility

Headings follow the page's heading levels, an image's alternative text is given in the editor, and colours come from the theme's values, whose contrast is checked to WCAG AA. No motion and no timed content.

Used in 50 templates

All 50 templates

Rich text

Block richtext

Formatted text: bold, links, lists and quotes.

Example Open in a new tab

Settings (1)
SettingEdited asDefault
Content htmlFormatted text–

Accessibility

Headings follow the page's heading levels, an image's alternative text is given in the editor, and colours come from the theme's values, whose contrast is checked to WCAG AA. No motion and no timed content.

Used in 73 templates

All 73 templates

Image

Block image

A picture with alternative text, cropping and zoom.

Example Open in a new tab

Settings (15)
SettingEdited asDefault
Image srcImage–
Alternative text altText–
Caption captionText–
URL urlLink–
Image width (px) widthNumber–
Image height (px) heightNumber–
Image sizes to make widthsText480,768,1200,1600
Image width on the page sizesText100vw
Frame frameChoice– (No frame · Browser · Phone · Window)
Shape shapeChoice– (Rectangle · Circle · Rounded · Hexagon)
Effect under the pointer hoverEffectChoice– (No effect · Picture zooms in · Black and white, colour under the pointer · Picture tilts in 3D)
Enlarge on click zoomOn / off–
Aspect ratio ratioChoice– (Original · 1:1 (square) · 4:3 · 3:2 · 16:9 (widescreen) · 21:9 (wide))
Crop focus focusCrop focal point–
Topic in a gallery categoryText–

Accessibility

Every image has alternative text or is marked decorative. Zoom and the image browser work with a keyboard (arrows, Esc) and announce the position ("Image 2 of 5"). Only the first visible image loads at once.

Used in 55 templates

All 55 templates

Button

Block button

A button as a link: primary, secondary, outline, ghost or text link, optionally with an icon.

Example Open in a new tab

Styles (5)

Every style is shown side by side in the example: Primary, Secondary, Outline, Ghost (no background), Link

Settings (10)
SettingEdited asDefault
Label labelTextButton
URL urlLink#
Style variantChoicePrimary (Primary · Secondary · Outline · Ghost (no background) · Link)
Background color backgroundTheme colour–
Text color colorTheme colour–
Button size sizeChoice– (Small · Medium · Large)
Colour toneChoice– (Primary colour · Secondary colour · Accent colour · Dark (text colour) · Light (background colour))
Corners radiusChoice– (Square · Rounded · Pill)
Icon iconIcon– (Phone · Email · Location · Calendar · Clock · People · Star · Heart · Check mark · Arrow right · Facebook · Instagram · YouTube · LinkedIn · X (Twitter) · Ticket · Trophy · Dumbbell · Scissors · Cutlery · Home · Info · Alert · Play · Pause · Search · Menu · Close · Plus · Minus · Chevron down · External link · Download · Share · Camera · Image · Quote · Sparkles · Lightning · Globe · Wrench · Car · Shield · Truck · Leaf · Drop · Key · Code · Server · Cloud · Lock · Laptop · Bicycle · Battery · Wi-Fi · Projector · Screen · Microphone · Sound system · Parking · Accessible · Coffee and catering · Air conditioning · Natural light · Video conferencing · Stage)
Icon position iconPositionChoice– (Before the text · After the text)

Accessibility

Headings follow the page's heading levels, an image's alternative text is given in the editor, and colours come from the theme's values, whose contrast is checked to WCAG AA. No motion and no timed content.

Used in 47 templates

All 47 templates

Button group

Block buttonGroup

A button group: several buttons side by side in the same style.

Example Open in a new tab

Styles (3)

Every style is shown side by side in the example: Primary, Secondary, Outline

Settings (4)
SettingEdited asDefault
Items itemsLong textVaraa vuoro|/varaa Hinnasto|/hinnasto Yhteystie…
Name of the group for screen readers labelText–
Style variantChoicePrimary (Primary · Secondary · Outline)
Alignment alignChoice– (Start · Center · End)

Accessibility

Headings follow the page's heading levels, an image's alternative text is given in the editor, and colours come from the theme's values, whose contrast is checked to WCAG AA. No motion and no timed content.

Used in 0 templates

No gallery template uses this yet. Add it to a page from the editor's Add section library.

Spacer

Block spacer

Empty space between blocks, sized by the theme's spacing.

Example Open in a new tab

Settings (1)
SettingEdited asDefault
Height (px) heightNumber24

Accessibility

Headings follow the page's heading levels, an image's alternative text is given in the editor, and colours come from the theme's values, whose contrast is checked to WCAG AA. No motion and no timed content.

Used in 0 templates

No gallery template uses this yet. Add it to a page from the editor's Add section library.

Divider

Block divider

A horizontal line to separate content.

Example Open in a new tab

Settings (1)
SettingEdited asDefault
Thickness (px) thicknessNumber1

Accessibility

Headings follow the page's heading levels, an image's alternative text is given in the editor, and colours come from the theme's values, whose contrast is checked to WCAG AA. No motion and no timed content.

Used in 0 templates

No gallery template uses this yet. Add it to a page from the editor's Add section library.

Container

Block container

A group: gathers blocks into one box with its own background, border and layout.

Example Open in a new tab

Settings (2)
SettingEdited asDefault
Background color backgroundTheme colour–
Boxed callout boxedOn / off–

Accessibility

Headings follow the page's heading levels, an image's alternative text is given in the editor, and colours come from the theme's values, whose contrast is checked to WCAG AA. No motion and no timed content.

Used in 87 templates

All 87 templates

Embed

Block embed

An embed: YouTube, Vimeo, a map or an allowed external service, safely in a frame.

An embed (YouTube, a map, a form service) shows only with the visitor's consent, so the example shows the consent placeholder.

Example Open in a new tab

Settings (4)
SettingEdited asDefault
Embed URL urlLinkhttps://www.youtube.com/embed/
Title titleTextVideo
Aspect ratio aspectChoice16:9 (16:9 · 4:3 · 1:1 · 3:4 · Tall (form/docs))
Embed height (px) heightNumber–

Accessibility

A map loads only on request or after consent, and the address is always also given as text with a link. The map can be skipped with a keyboard.

Used in 22 templates

All 22 templates

Map

Block Try it map

A map by address: the platform's own map, which loads only when it comes into view.

Example Open in a new tab

Settings (6)
SettingEdited asDefault
Address addressText–
Title titleTextKartta
Aspect ratio aspectChoice4:3 (16:9 · 4:3 · 1:1 · 3:4 · Tall (form/docs))
Map service providerChoice– (The site's choice · OpenStreetMap (own map, no cookies) · Google Maps (asks for consent))
Latitude latNumber–
Longitude lonNumber–

Accessibility

A map loads only on request or after consent, and the address is always also given as text with a link. The map can be skipped with a keyboard.

Used in 51 templates

All 51 templates

Video

Block Try it video

A video: an own file or YouTube/Vimeo, with a poster and captions.

Example Open in a new tab

Settings (11)
SettingEdited asDefault
Video file URL srcLink–
WebM version (optional) srcWebmLink–
Poster image posterImage–
Caption captionText–
Autoplay (muted) autoplayOn / off–
Play only while the video is in view playInViewOn / off–
Loop loopOn / off–
Show controls controlsOn / offtrue
Display displayChoice– (Video on the page · Picture and play button, the video opens on top)
Play button text buttonLabelText–
Frame frameChoice– (No frame · Browser · Phone · Window)

Accessibility

Every image has alternative text or is marked decorative. Zoom and the image browser work with a keyboard (arrows, Esc) and announce the position ("Image 2 of 5"). Only the first visible image loads at once.

Used in 4 templates

Audio

Block Try it audio

An audio file with a player: a sample, a podcast or an audio guide.

Example Open in a new tab

Settings (3)
SettingEdited asDefault
Heading titleTextKuuntele näyte
Audio file srcLink–
Caption captionText–

Accessibility

Every image has alternative text or is marked decorative. Zoom and the image browser work with a keyboard (arrows, Esc) and announce the position ("Image 2 of 5"). Only the first visible image loads at once.

Used in 2 templates

Form

Block Try it form

A form as a block: the same form as the form section, inside a column.

Example Open in a new tab

Settings (1)
SettingEdited asDefault
Form formIdForm–

Accessibility

Every field has a visible label, a required field says so in text, errors are announced and lead to the field, and autocomplete fills in familiar details. Touch targets are at least 44 px.

Used in 0 templates

No gallery template uses this yet. Add it to a page from the editor's Add section library.

App stores

Block appBadges

App stores: the app's App Store, Google Play and Microsoft Store links as store badges in the visitor's language; the owner uploads the official badges, otherwise buttons.

Example Open in a new tab

Settings (14)
SettingEdited asDefault
App Store address appStoreUrlLink–
Google Play address googlePlayUrlLink–
Microsoft Store address microsoftStoreUrlLink–
Web version address webAppUrlLink–
App Store badge image appStoreImageImage–
Google Play badge image googlePlayImageImage–
Microsoft Store badge image microsoftStoreImageImage–
Layout layoutChoiceIn a row (In a row · Stacked)
Alignment alignChoiceStart (Start · Centre · End)
Size sizeChoiceNormal (Normal · Small)
Show a QR code qrOn / off–
QR code address qrUrlLink–
Text under the code qrCaptionText–
QR code is shown qrShowChoice– (On wide screens only · Always, also on phones)

Accessibility

Navigation is a named landmark, the current page is marked with aria-current, the menu button has a state (aria-expanded) and a skip link leads to the content. Everything works with a keyboard and on a 390 px screen without sideways scrolling.

Used in 1 templates

Share buttons

Block shareButtons

Share buttons: share the page on Facebook, WhatsApp or copy the link.

Example Open in a new tab

Settings (9)
SettingEdited asDefault
Heading labelText–
Text to share textText–
Facebook facebookOn / offtrue
WhatsApp whatsappOn / offtrue
X xOn / offtrue
LinkedIn linkedinOn / offfalse
E-mail emailOn / offtrue
Copy link copyOn / offtrue
Alignment alignChoice– (Start · Center · End)

Accessibility

Navigation is a named landmark, the current page is marked with aria-current, the menu button has a state (aria-expanded) and a skip link leads to the content. Everything works with a keyboard and on a 390 px screen without sideways scrolling.

Used in 1 templates

Downloads

Block downloads

Downloadable files as a list: name, type and size.

Example Open in a new tab

Settings (2)
SettingEdited asDefault
Heading titleText–
Items itemsLong textLehdistökuva, vaaka|/media/lehdistokuva-vaaka.j…

Accessibility

Tables have header cells and a caption, lists are real lists and dates are in a readable form. A chart's numbers are available as text too.

Used in 5 templates

Code block

Block code

A code block: sample code in a monospaced font with a copy button.

Example Open in a new tab

Settings (4)
SettingEdited asDefault
Code or text as it is codeLong textnpm install npm run dev
Title (e.g. the file name) titleTextAsennus
Show a copy button copyOn / offtrue
Wrap long lines wrapOn / offfalse

Accessibility

Headings follow the page's heading levels, an image's alternative text is given in the editor, and colours come from the theme's values, whose contrast is checked to WCAG AA. No motion and no timed content.

Used in 0 templates

No gallery template uses this yet. Add it to a page from the editor's Add section library.

QR code

Block qrCode

A QR code for an address, for example on a printable poster.

Example Open in a new tab

Settings (6)
SettingEdited asDefault
The code opens targetChoiceThis page (This page · Another address (e.g. booking page or event))
Address urlLink–
Text under the code labelText–
Show the address as text showUrlOn / offtrue
Size sizeChoiceMedium (Small · Medium · Large)
Download for print links (SVG and PNG) downloadOn / offtrue

Accessibility

Every image has alternative text or is marked decorative. Zoom and the image browser work with a keyboard (arrows, Esc) and announce the position ("Image 2 of 5"). Only the first visible image loads at once.

Used in 1 templates

Table of contents

Block toc

A table of contents that gathers the page's headings into links.

Example Open in a new tab

Settings (3)
SettingEdited asDefault
Title titleTextSisällys
Headings to include depthChoiceMain headings only (H2) (Main headings only (H2) · Main and sub headings (H2 and H3))
Stays in view while scrolling (wide screen) stickyOn / offfalse

Accessibility

Navigation is a named landmark, the current page is marked with aria-current, the menu button has a state (aria-expanded) and a skip link leads to the content. Everything works with a keyboard and on a 390 px screen without sideways scrolling.

Used in 0 templates

No gallery template uses this yet. Add it to a page from the editor's Add section library.

Link list

Block listGroup

A link list: links one under another with descriptions, e.g. guides or services.

Example Open in a new tab

Styles (2)

Every style is shown side by side in the example: Bordered list, Large index (underlined links)

Settings (2)
SettingEdited asDefault
Items itemsLong textHinnasto|/hinnasto|alk. 20 €/h Aukioloajat|/auk…
Style variantChoice– (Bordered list · Large index (underlined links))

Accessibility

Headings follow the page's heading levels, an image's alternative text is given in the editor, and colours come from the theme's values, whose contrast is checked to WCAG AA. No motion and no timed content.

Used in 1 templates