Components· Elements
Elements
Small interface parts: alert, badge, progress bar, steps, timeline, table, chart and ratings.
27 components
The examples work in test mode: nothing is saved to a real site, no messages are sent and payments are test payments.
Alert
Block alert
An alert box: info, success, warning or error with its own colour and icon.
Styles (4)
Every style is shown side by side in the example: Info, Success, Warning, Error
Settings (3)
| Setting | Edited as | Default |
|---|---|---|
Style variant | Choice | Info |
Title title | Text | Huomio |
Text text | Long text | Halli on suljettu juhannuksena. |
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 29 templates
All 29 templates
- Small hotel
- Guesthouse and B&B
- Cottage and villa
- Experiences and tours
- Personal trainer
- Taxi
- Farm and direct sales
- Athlete
- Author
- Literary society and classic
- Course centre and training company
- Piano school and music lessons
- Music and dance school
- Musician and band
- Influencer and content creator
- Photographer
- Consultant and coach
- Expert firm
- Design office
- Advertising and communications agency
- Law firm
- Staffing and recruitment
- Physiotherapy and therapy
- Care home and day care
- Climbing gym (A)
- Pharmacy
- Design, graphic design and video
- Translator and translation agency
- Insurance agent
Badge
Block badge
A badge: a small label such as New, Offer or Sold out.
Styles (9)
Every style is shown side by side in the example: Primary, Secondary, Accent, Dark, Outline, Success (green), Warning (orange), Info, Danger (red)
Settings (2)
| Setting | Edited as | Default |
|---|---|---|
Text text | Text | Uusi |
Style variant | Choice | Primary |
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 2 templates
Progress
Block progress
A progress bar: a goal and the status, e.g. a fundraiser's total.
Settings (5)
| Setting | Edited as | Default |
|---|---|---|
Label label | Text | Keräys uuteen kenttään |
Value value | Number | 6400 |
Goal (maximum) max | Number | 10000 |
Unit unit | Text | € |
Display display | Choice | Bar |
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 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Stat
Block stat
A key figure: a large number and a label.
Settings (3)
| Setting | Edited as | Default |
|---|---|---|
Label label | Text | Kävijöitä vuodessa |
Value value | Text | 42 000 |
Description description | 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 68 templates
- Padel hall
- Beach volleyball hall
- Yoga or pilates studio
- Massage or treatment clinic
- Barber or hair salon
- Small hotel
All 68 templates
- Padel hall
- Beach volleyball hall
- Yoga or pilates studio
- Massage or treatment clinic
- Barber or hair salon
- Small hotel
- Cottage and villa
- Equipment rental
- Online shop
- Gym
- Personal trainer
- League team
- Association
- Election candidate
- Restaurant
- Car repair shop
- Tyre shop and tyre hotel
- Driving school
- Vehicle inspection
- Car wash
- Used car dealer
- Body shop
- Car rental
- Towing service
- Taxi
- Farm and direct sales
- Athlete
- Author
- Outdoor club
- Course centre and training company
- Music and dance school
- Musician and band
- Influencer and content creator
- Photographer
- Haulage and logistics
- Electrician
- Plumbing and heating
- Building and renovation
- Earthworks and infrastructure
- Cleaning service
- Property maintenance
- Law firm
- Software house and consulting
- IT support for small businesses
- Staffing and recruitment
- Accounting firm
- Lunch restaurant
- Dentist
- Physiotherapy and therapy
- Veterinary clinic
- Beauty or nail salon
- Florist
- Bicycle shop
- Local grocery
- Clothing and shoe shop
- Interior and gift shop
- Hardware store
- Specialist shop
- Housing company
- Foundation
- Manufacturer and wholesaler
- Painter, roofer, flooring and carpentry
- Chimney sweep
- Card and payment app
- Venue chain
- Pharmacy
- Design, graphic design and video
- Insurance agent
Steps
Block steps
Steps: numbered progress, e.g. how booking works.
Settings (2)
| Setting | Edited as | Default |
|---|---|---|
Items items | Long text | Valitse aika|Katso vapaat vuorot kalenterista M… |
Orientation orientation | Choice | Horizontal |
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.
Timeline
Block timeline
A timeline: years and events one under another, e.g. a company's history.
Settings (1)
| Setting | Edited as | Default |
|---|---|---|
Items items | Long text | 2019|Halli avattiin|Kolme ensimmäistä kenttää 2… |
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 10 templates
Countdown
Block countdown
A countdown to an event or the end of an offer.
Settings (3)
| Setting | Edited as | Default |
|---|---|---|
Heading heading | Text | Tarjous päättyy |
End time (ISO) targetAt | Text | 2030-12-31T23:59:59Z |
Text when finished labelsDone | Text | Päättynyt |
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 2 templates
Dynamic number
Block dynamicNumber
A live number: live site data such as free places or members.
Settings (4)
| Setting | Edited as | Default |
|---|---|---|
Prefix prefix | Text | – |
Source source | Choice | Spots left |
Suffix suffix | Text | – |
Fallback value fallback | Number | 0 |
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 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Before and after image
Block Try it beforeAfter
A before–after image: two pictures compared with a slider.
Settings (9)
| Setting | Edited as | Default |
|---|---|---|
Image before before | Image | – |
Description of the before image beforeAlt | Text | – |
Image after after | Image | – |
Description of the after image afterAlt | Text | – |
Text on the image (before) beforeLabel | Text | Ennen |
Text on the image (after) afterLabel | Text | Jälkeen |
Divider starts at (%) start | Number | 50 |
Aspect ratio aspect | Choice | 16:9 |
Caption caption | Text | – |
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.
Rotating heading word
Block textRotate
A rotating heading word: one word of a heading changes between a few options.
Settings (7)
| Setting | Edited as | Default |
|---|---|---|
Text before the rotating word before | Text | Kotisivut |
Rotating words words | Long text | yhdistykselle yritykselle urheiluseuralle |
Text after the rotating word after | Text | – |
Heading level level | Choice | h2 |
Alignment align | Choice | – |
Word changes every (seconds) interval | Number | 3 |
Show the rotating word in the primary colour accent | On / off | true |
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.
Avatar group
Block avatarGroup
An avatar group: small portraits overlapping, e.g. a team or participants.
Settings (14)
| Setting | Edited as | Default |
|---|---|---|
Picture 1 image1 | Image | – |
Description of picture 1 (e.g. the name) image1Alt | Text | – |
Picture 2 image2 | Image | – |
Description of picture 2 (e.g. the name) image2Alt | Text | – |
Picture 3 image3 | Image | – |
Description of picture 3 (e.g. the name) image3Alt | Text | – |
Picture 4 image4 | Image | – |
Description of picture 4 (e.g. the name) image4Alt | Text | – |
Picture 5 image5 | Image | – |
Description of picture 5 (e.g. the name) image5Alt | Text | – |
Others (shown as +N) more | Number | 120 |
Text text | Text | Yli 120 jäsentä pelaa meillä joka viikko |
Picture size size | Choice | Medium |
Alignment align | Choice | – |
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.
Table
Block dataTable
A table: rows and columns with header cells, e.g. a price list or a schedule.
Settings (7)
| Setting | Edited as | Default |
|---|---|---|
Table caption caption | Text | Hinnasto |
Rows rows | Long text | Palvelu|Kesto|Hinta Perushuolto|45 min|49 € Laa… |
The first row is the heading row headerRow | On / off | true |
The first column is the row heading firstColumnHeader | On / off | – |
Stripe every other row striped | On / off | true |
Visitors can sort the rows by a column sortable | On / off | false |
On a phone phone | Choice | Scroll sideways |
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 30 templates
All 30 templates
- Massage or treatment clinic
- Equipment rental
- Online shop
- League team
- Association
- Wedding
- Restaurant
- Tyre shop and tyre hotel
- Driving school
- Vehicle inspection
- Car wash
- Car rental
- Farm and direct sales
- Athlete
- Outdoor club
- League or series
- Haulage and logistics
- Earthworks and infrastructure
- Software house and consulting
- IT support for small businesses
- Local grocery
- Clothing and shoe shop
- Interior and gift shop
- Hardware store
- Specialist shop
- Manufacturer and wholesaler
- Flea market
- Chimney sweep
- Climbing gym (B)
- Venue chain
Chart
Block chart
A chart: a bar, line or pie chart of numbers, the numbers also as text.
Settings (5)
| Setting | Edited as | Default |
|---|---|---|
Chart title title | Text | Jäsenmäärä vuosittain |
Chart type type | Choice | Bars |
Figures data | Long text | 2022|180 2023|240 2024|310 2025|420 |
Unit unit | Text | – |
What to notice in the chart description | Text | – |
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 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Star rating
Block rating
A star rating with a number, e.g. 4.8 / 5.
Settings (6)
| Setting | Edited as | Default |
|---|---|---|
Score (e.g. 4.8) value | Text | 4,8 |
Number of stars max | Number | 5 |
Caption label | Text | Asiakkaiden antama arvosana |
Show the score as a number showValue | On / off | true |
Size size | Choice | Medium |
Alignment align | Choice | – |
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.
Customer reviews (e.g. Google)
Block reviews
Customer reviews, e.g. from Google: stars, text and the reviewer's name.
Settings (8)
| Setting | Edited as | Default |
|---|---|---|
Source of the reviews source | Choice | Own customer feedback |
Heading heading | Text | Asiakkaiden kokemuksia |
Where the reviews are from (e.g. Google) sourceName | Text | – |
Average score (e.g. 4.8) rating | Text | 4,8 |
Number of reviews in total count | Number | 132 |
Reviews reviews | Long text | Anna K.|5|maaliskuu 2026|Varaaminen oli helppoa… |
Address where all the reviews are (e.g. a Google profile) profileUrl | Link | – |
Link text linkLabel | 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.
Tags (chips)
Block chips
Chips: small rounded labels of topics or features.
Styles (3)
Every style is shown side by side in the example: Soft background, Outline, Solid colour
Settings (5)
| Setting | Edited as | Default |
|---|---|---|
Items items | Long text | Padel Sulkapallo|/lajit/sulkapallo Tennis|/laji… |
Name of the group for screen readers label | Text | – |
Style variant | Choice | Soft background |
Size size | Choice | Medium |
Alignment align | Choice | – |
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 12 templates
Dropdown button
Block Try it dropdown
A dropdown button: a button that opens a list of links.
Styles (3)
Every style is shown side by side in the example: Primary, Secondary, Outline
Settings (4)
| Setting | Edited as | Default |
|---|---|---|
Button label label | Text | Valitse toimipiste |
Items items | Long text | Keskusta|/toimipisteet/keskusta Länsi|/toimipis… |
Style variant | Choice | Primary |
Alignment align | Choice | – |
Accessibility
Content that opens is a button with a name and a state (aria-expanded or the selected tab). Works with a keyboard: Tab moves, Enter and Space open, Esc closes what opened. The content can be read without JavaScript too.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Text with an info tip
Block Try it infoTip
Text with more info: a term's explanation opens as a tip when pressed.
Settings (2)
| Setting | Edited as | Default |
|---|---|---|
Text text | Text | Toimitus 5,90 € |
Explanation that opens from the i button tip | Long text | Toimitamme arkisin 1–3 päivässä. Yli 60 euron t… |
Accessibility
Content that opens is a button with a name and a state (aria-expanded or the selected tab). Works with a keyboard: Tab moves, Enter and Space open, Esc closes what opened. The content can be read without JavaScript too.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Dark mode switch
Block Try it themeToggle
A dark mode switch: the visitor turns the page light or dark.
Settings (2)
| Setting | Edited as | Default |
|---|---|---|
Text of the switch label | Text | Tumma tila |
Alignment align | Choice | Start |
Accessibility
Content that opens is a button with a name and a state (aria-expanded or the selected tab). Works with a keyboard: Tab moves, Enter and Space open, Esc closes what opened. The content can be read without JavaScript too.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Chat bubbles
Block Try it chat
Chat bubbles: a question-and-answer conversation as bubbles, e.g. FAQs.
Settings (2)
| Setting | Edited as | Default |
|---|---|---|
Messages messages | Long text | Asiakas|Hei! Onko teillä vapaita vuoroja lauant… |
Name of the group for screen readers label | Text | – |
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.
Flip card
Block Try it flipCard
A flip card: a picture or heading on the front, more information on the back.
Settings (9)
| Setting | Edited as | Default |
|---|---|---|
Image image | Image | – |
Alternative text imageAlt | Text | – |
Front heading frontTitle | Text | Hieronta |
Front text frontText | Long text | 60 min · 69 € |
Back heading backTitle | Text | Mitä hoitoon kuuluu? |
Back text backText | Long text | Lihashuolto koko keholle. Kerro toiveesi hoidon… |
Link text linkLabel | Text | Varaa aika |
URL linkUrl | Link | /ajanvaraus |
Turn button text flipLabel | Text | – |
Accessibility
Content that opens is a button with a name and a state (aria-expanded or the selected tab). Works with a keyboard: Tab moves, Enter and Space open, Esc closes what opened. The content can be read without JavaScript too.
Used in 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Lottie animation
Block lottie
A Lottie animation: a light vector animation from a JSON file.
A Lottie animation needs an animation file; without one the example shows an empty placeholder. Motion stops when the visitor has asked for less motion.
Settings (6)
| Setting | Edited as | Default |
|---|---|---|
Lottie file (.json) src | Link | – |
Description for screen readers label | Text | – |
Still picture (shown before loading) poster | Image | – |
Autoplay (muted) autoplay | On / off | true |
Loop loop | On / off | true |
Maximum width (px) maxWidth | Number | – |
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.
3D model
Block Try it model3d
A 3D model: a product or object can be turned and zoomed in the browser; it loads only on request.
No model is shown in the example because a 3D model is the site's own uploaded file (glb); without a file only the model's placeholder is shown.
Settings (5)
| Setting | Edited as | Default |
|---|---|---|
3D model (GLB or glTF) src | Link | – |
Poster poster | Image | – |
Which product the model shows alt | Text | – |
Caption caption | Text | – |
Turn automatically autoRotate | On / off | false |
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 0 templates
No gallery template uses this yet. Add it to a page from the editor's Add section library.
Calculator
Block Try it calculator
A calculator as a block: the same calculator as the section, inside a column.
Settings (11)
| Setting | Edited as | Default |
|---|---|---|
Heading heading | Text | Laske siivouksen hinta |
Introduction intro | Long text | Valitse asunnon koko ja siivousväli, niin näet … |
Fields inputs | Long text | pinta_ala | Asunnon pinta-ala | luku | min 20; … |
Results outputs | Long text | kerta | Hinta-arvio käynniltä | max(69, pinta_a… |
Note under the price disclaimer | Text | Hinta-arvio, lopullinen hinta tarjouksessa. |
Button text ctaLabel | Text | Pyydä tarjous |
Form the button opens ctaForm | Form | – |
Or the page the button goes to ctaLink | Link | – |
VAT vat | Choice | Prices include VAT |
VAT rate (%) vatRate | Number | 25.5 |
Form field for the summary ctaSummaryField | Text | – |
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.
Checklist start
Block Try it dateChecklistStart
Checklist start: the visitor picks a date, and the button opens the checklist page with that date filled in.
Settings (4)
| Setting | Edited as | Default |
|---|---|---|
Checklist page url | Link | – |
Name of the day dateLabel | Text | – |
Button text buttonLabel | Text | – |
Link without a day linkLabel | Text | – |
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.
Instalment calculator
Block Try it financing
An instalment calculator as a block, e.g. next to a product or a car.
Settings (24)
| Setting | Edited as | Default |
|---|---|---|
Heading heading | Text | Maksa osissa |
Introduction intro | Long text | Jaa ostoksen hinta tasaisiin kuukausieriin. Las… |
Your business’s role lenderRole | Choice | – |
Lender lender | Text | – |
Price label priceLabel | Text | Ostoksen hinta |
Price control priceControl | Choice | Number box |
Example price (€) price | Number | 2000 |
Lowest price (€) priceMin | Number | 200 |
Highest price (€) priceMax | Number | 20000 |
Price step (€) priceStep | Number | 50 |
Ask for a down payment askDownPayment | On / off | false |
Example down payment (€) downPayment | Number | 0 |
Terms (months) terms | Text | 6, 12, 24, 36 |
Example term (months) term | Number | 12 |
Borrowing rate (% a year) rate | Number | 7.9 |
Rate type rateType | Choice | Fixed |
Arrangement fee (€) openingFee | Number | 39 |
The arrangement fee is paid openingFeeWhen | Choice | With the first instalment |
Account or billing fee (€/month) monthlyFee | Number | 6 |
Note under the price disclaimer | Text | Laskelma on suuntaa antava. Luoton myöntää ja s… |
Button text ctaLabel | Text | Kysy lisää |
Form the button opens ctaForm | Form | – |
Or the page the button goes to ctaLink | Link | – |
Form field for the summary ctaSummaryField | Text | – |
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.
Notifications
Block Try it pushNotices
A notifications sign-up as a block inside a column.
Nothing is subscribed in the preview: the button tells what it does on a real site.
Settings (7)
| Setting | Edited as | Default |
|---|---|---|
Heading heading | Text | – |
Explanation above the button body | Long text | – |
Button label buttonLabel | Text | – |
Privacy note under the button note | Long text | – |
Newsletter sign-up page (alternative) newsletterUrl | Link | – |
Newsletter link text newsletterLabel | Text | – |
Layout layout | Choice | Small button (footer) |
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.