Omasivusto.fi
Components· Basics

Components

Basics

The building blocks of a page: hero, text, image, grid, call to action and feature rows.

10 components

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

Hero

Section hero

A page's first section: a large heading, a short introduction, one or two buttons and a picture beside it, behind it or in a card. In the task cards design its blocks are the visitor's top tasks: one link per card, stacked on a phone.

Example Open in a new tab

Styles (8)

Pick a style and the example above switches to it. The content stays the same; only the look changes.

Settings (40)
SettingEdited asDefault
Heading headingTextHeading
Highlighted end of the heading headingAccentText–
Badge above the heading badgeText–
Subheading subheadingText–
Image imageImage–
Alternative text imageAltText–
Picture crop imageFocusChoice– (Centre · Keep the top (people) · Keep the bottom)
Image width (px) imageWidthNumber–
Image height (px) imageHeightNumber–
Image sizes to make imageWidthsText800,1200,1600
Image width on the page imageSizesText100vw
Button label buttonLabelText–
Button link buttonUrlLink–
Style buttonVariantChoice– (Primary · Secondary)
Second button text button2LabelText–
Second button link button2UrlLink–
Style button2VariantChoice– (Primary · Secondary)
Alignment alignChoiceStart (Start · Center · End)
Text over the image overlayStyleChoice– (In a box · Light veil, dark text · Dark veil, light text)
Text on the picture textContrastChoice– (Automatic: the veil is strengthened until the text stands out (WCAG AA) · Keep the veil as it is)
Height heightChoice– (Automatic · Medium · Tall · Extra tall)
Opening section layout layoutChoice– (Image above text · Text over image)
Opening section width widthChoice– (Content width · Edge to edge)
Name of the task cards for screen readers tasksLabelText–
Cards per row on a wide screen taskColumnsNumber–
Beside the text visualChoice– (Image · Card stack (cards as blocks))
Speed stackSpeedChoice– (Slow · Normal · Fast)
Green check on the middle card stackCheckOn / off–
Card style stackLookChoice– (Glass (translucent, for dark backgrounds) · Plain (for light backgrounds))
Card shape stackShapeChoice– (Rounded card · Pill (smaller, every card in sight))
List name for screen readers stackLabelText–
On the picture: title overlayTitleText–
On the picture: value overlayValueText–
On the picture: detail overlayNoteText–
Image on a phone mobileImageChoice– (Before the text · After the buttons)
Search field in the hero heroSearchChoice– (No search field · In place of the buttons · Below the buttons)
Search field hint heroSearchPlaceholderText–
Search suggestions under the field popularSearchesLong text–
Heading of the suggestions popularSearchesHeadingText–
Design designChoice– (Basic · Text beside image · Image beside text · Gradient panel · Large heading, wide image · Card over photo · Centred, framed image · Hero with task cards)

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 93 templates

All 93 templates

Text section

Section text

A heading and formatted text: an introduction, a story or instructions. Styles include lead, two columns, quote and sidebar.

Example Open in a new tab

Styles (5)

Pick a style and the example above switches to it. The content stays the same; only the look changes.

Settings (4)
SettingEdited asDefault
Heading headingText–
Body bodyFormatted text–
Heading level headingLevelChoice– (Section heading (h2) · Page title (h1))
Design designChoice– (Basic · Centred lead · Two columns · Large quote · Heading at the side)

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

Image

Section image

A single picture, full width or framed, with a caption and alternative text.

Example Open in a new tab

Settings (11)
SettingEdited asDefault
Image imageImage–
Alternative text altText–
Caption captionText–
Width widthChoiceContent width (Content width · Full width)
Enlarge on click zoomOn / offtrue
Aspect ratio ratioChoice– (Original · 1:1 (square) · 4:3 · 3:2 · 16:9 (widescreen) · 21:9 (wide))
Crop focus focusCrop focal point–
Image width (px) imageWidthNumber–
Image height (px) imageHeightNumber–
Image sizes to make imageWidthsText–
Image width on the page imageSizesText–

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

Grid

Section grid

A free layout area where blocks go in rows, columns or a grid. Most pages are built from these.

Example Open in a new tab

Styles (4)

Pick a style and the example above switches to it. The content stays the same; only the look changes.

Settings (16)
SettingEdited asDefault
Layout layoutChoiceGrid (Grid · Layer order · Card carousel (horizontal scroll) · Free placement · Overlapping (layers))
Columns columnsNumber3
Column widths columnWidthsText–
Direction directionChoice– (Row · Column)
Gap gapText{space.md}
Overlap overlapAmountChoice– (A little · Medium · A lot)
In front overlapFrontChoice– (Second block (e.g. image over the text) · First block)
Vertical alignment overlapAlignChoice– (Start · Center · End)
Heading headingText–
Introduction introFormatted text–
Heading position headAlignChoice– (Centred · Left)
Bottom button text buttonLabelText–
Button link buttonUrlLink–
Bottom button style buttonVariantChoice– (Primary · Secondary · Outline)
Design designChoice– (Basic · Shadowed cards · Outlined cards · Picture cards)
Highlight on hover cardHighlightChoice– (No highlight · Lift · Border colour · Lift and border colour)

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 94 templates

All 94 templates

Call to action

Section cta

A call to action: a short prompt and a button to book, buy or get in touch.

Example Open in a new tab

Styles (4)

Pick a style and the example above switches to it. The content stays the same; only the look changes.

Settings (9)
SettingEdited asDefault
Heading headingTextOtsikko
Text bodyLong text–
Button label buttonLabelText–
Button link buttonUrlLink–
Second button text button2LabelText–
Second button link button2UrlLink–
Layout layoutChoiceCentred (Centred · Text on the left, buttons on the right)
Style variantChoiceAccent colour (No background · Card · Accent colour)
Design designChoice– (Basic · Gradient · Bold heading with rule · Dashed outline)

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

All 90 templates

Alternating image and text

Section featureRows

Picture and text alternating left and right: services or features presented one row at a time.

Example Open in a new tab

Styles (4)

Pick a style and the example above switches to it. The content stays the same; only the look changes.

Settings (7)
SettingEdited asDefault
Heading headingText–
Introduction introFormatted text–
Image side imageSideChoiceAlternating (Alternating · Always on the left · Always on the right)
Layout layoutChoice– (Rows one under another · Features around an image)
Centre image (around-an-image layout) centerImageImage–
Alternative text centerImageAltText–
Design designChoice– (Basic · Cards · Offset colour block · Numbered)

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 70 templates

All 70 templates

Bento grid

Section bento

A grid of tiles of different sizes, where highlights stand out by size and background.

Example Open in a new tab

Settings (3)
SettingEdited asDefault
Heading headingText–
Introduction introFormatted text–
Columns columnsNumber3

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

Icon boxes

Section iconBoxes

An icon, a heading and a short text side by side: services, benefits or steps at a glance.

Example Open in a new tab

Styles (8)

Pick a style and the example above switches to it. The content stays the same; only the look changes.

Settings (4)
SettingEdited asDefault
Heading headingText–
Columns columnsNumber3
Design designChoice– (Basic · Cards · Icon beside text · Numbered steps · Icons in circles · Heading at the side · Quick links · Compact list)
Highlight on hover cardHighlightChoice– (No highlight · Lift · Border colour · Lift and border colour)

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

Scrolling text (marquee)

Section textMarquee

A text strip that slides sideways for slogans or partners. It stops when the visitor has asked for less motion.

Example Open in a new tab

Settings (3)
SettingEdited asDefault
Phrases (one per line) itemsLong textIlmainen pysäköinti Avoinna joka päivä Kotimain…
Strip speed speedChoiceNormal (Slow · Normal · Fast)
Text size sizeChoiceNormal (Normal · Large)

Accessibility

No automatic motion by default. If the owner turns motion on, a Pause button is the first control and prefers-reduced-motion always stops it (WCAG 2.2.2). The controls have names in the site's language.

Used in 0 templates

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

Page not found (404)

Section notFound

The page-not-found view: an explanation, links or search and a button to the front page.

Example Open in a new tab

Settings (9)
SettingEdited asDefault
Error code codeText404
Heading headingTextSivua ei löytynyt
Text bodyLong text–
Button label buttonLabelText–
Button link buttonUrlLink–
Second button text button2LabelText–
Second button link button2UrlLink–
Heading of the link list linksHeadingText–
Pages people look for linksLong 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 0 templates

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