Components· Interactive
Interactive
Accordions, tabs, carousels, popups, quizzes, calculators and a voting advice tool. All of them work with a keyboard.
11 components
The examples work in test mode: nothing is saved to a real site, no messages are sent and payments are test payments.
Accordion
Section Try it accordion
An accordion: questions and answers or other content that opens by pressing its heading. Suits FAQs.
Styles (5)
Pick a style and the example above switches to it. The content stays the same; only the look changes.
Settings (2)
| Setting | Edited as | Default |
|---|---|---|
Heading heading | Text | – |
Design design | 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 90 templates
- Padel hall
- Tennis hall
- Beach volleyball hall
- Yoga or pilates studio
- Massage or treatment clinic
- Barber or hair salon
All 90 templates
- Padel hall
- Tennis hall
- Beach volleyball hall
- Yoga or pilates studio
- Massage or treatment clinic
- Barber or hair salon
- Small hotel
- Guesthouse and B&B
- Cottage and villa
- Experiences and tours
- Equipment rental
- Online shop
- Gym
- Personal trainer
- Sports club
- League team
- Team sports club
- Individual sports club
- Association
- Election candidate
- Party venue
- Wedding
- 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
- 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
- League or series
- Photographer
- Haulage and logistics
- Electrician
- Plumbing and heating
- Building and renovation
- Earthworks and infrastructure
- Cleaning service
- Property maintenance
- Consultant and coach
- Expert firm
- Design office
- Advertising and communications agency
- Law firm
- Software house and consulting
- IT support for small businesses
- Staffing and recruitment
- Estate agent
- Accounting firm
- Café and bakery
- Lunch restaurant
- Pizzeria
- 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
- Manufacturer and wholesaler
- Painter, roofer, flooring and carpentry
- Care home and day care
- Flea market
- Chimney sweep
- Card and payment app
- Climbing gym (A)
- Climbing gym (B)
- Venue chain
- Pharmacy
- Design, graphic design and video
- Translator and translation agency
- Insurance agent
Tabs
Section Try it tabs
Tabs: parts of the same topic (e.g. prices for adults and juniors) as tabs side by side.
Styles (4)
Pick a style and the example above switches to it. The content stays the same; only the look changes.
Settings (5)
| Setting | Edited as | Default |
|---|---|---|
Heading heading | Text | – |
Tab style style | Choice | – |
Tab picture mediaMode | Choice | – |
Open today’s tab openToday | On / off | – |
Lunch ends at todayUntil | 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.
Image carousel
Section Try it carousel
An image carousel: slides with headings and buttons, browsed with arrows and swipes. No automatic change by default.
Settings (8)
| Setting | Edited as | Default |
|---|---|---|
Carousel label (accessibility) ariaLabel | Text | – |
Height (px) height | Number | 800 |
Mobile height (px) mobileHeight | Number | 450 |
Automatic slide change (milliseconds, 0 = off) autoplayMs | Number | 0 |
Show arrows showArrows | On / off | true |
Show dots showDots | On / off | true |
Alignment align | Choice | Center |
Opening section width width | Choice | Edge to edge |
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.
Popup
Section Try it popup
A popup: an offer, a newsletter sign-up or a notice that opens after a delay, on scroll or from a link.
In the example the popup opens after three seconds, as a timed popup does on a real page; close it with the cross or the Esc key.
Settings (10)
| Setting | Edited as | Default |
|---|---|---|
Heading heading | Text | Tilaa uutiskirje |
Body body | Formatted text | – |
Form formId | Form | – |
Open trigger trigger | Choice | After delay |
Delay (ms) delayMs | Number | 3000 |
Scroll (%) scrollPercent | Number | 50 |
Exit-intent popup exitIntent | On / off | – |
Once per session oncePerSession | On / off | – |
Button label ctaLabel | Text | – |
Button link ctaUrl | Link | – |
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.
Quiz
Section Try it quiz
A quiz or product finder: questions with options and a result or recommendation by score at the end.
Settings (13)
| Setting | Edited as | Default |
|---|---|---|
Heading heading | Text | Tietovisa |
Intro intro | Long text | Vastaa kysymyksiin ja katso tuloksesi. |
Quiz type mode | Choice | Knowledge quiz: score and explanations |
Questions and results quiz | Quiz questions | {"questions":[{"id":"q1","text":"Kirjoita ensim… |
Start button text startLabel | Text | – |
Explanations are shown explain | Choice | Right after each answer |
Questions in random order shuffle | On / off | – |
Questions shown pool | Number | – |
Time limit in seconds timeLimit | Number | – |
When results have equal points tie | Choice | – |
Share text shareText | Text | – |
Link if the quiz cannot start: text fallbackLabel | Text | – |
Link if the quiz cannot start: address fallbackUrl | Link | – |
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.
Calculator
Section Try it calculator
A calculator: the visitor enters numbers (e.g. area, people) and sees a price or result by your own formula.
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 13 templates
Checklist
Section Try it dateChecklist
A date-based checklist: the visitor picks a date and sees the tasks with their dates, and the choices stay in their own browser.
Settings (10)
| Setting | Edited as | Default |
|---|---|---|
Heading heading | Text | – |
Intro intro | Long text | – |
Name of the day dateLabel | Text | – |
Questions for the visitor choices | Long text | – |
"Do now" list, days ahead nowDays | Number | 30 |
Heading: do now labelNow | Text | – |
Heading: before the day labelBefore | Text | – |
Heading: on the day labelEvent | Text | – |
Heading: after the day labelAfter | Text | – |
Note under the list disclaimer | Long 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.
Document builder
Section Try it documentBuilder
Document builder: the visitor fills in a document step by step, sees a watermarked preview, pays and downloads a PDF. The document is not stored on the server.
Settings (10)
| Setting | Edited as | Default |
|---|---|---|
Document template template | Choice | – |
Heading heading | Text | – |
Introduction intro | Long text | – |
Price in euros (VAT included) price | Number | – |
Payment button text payLabel | Text | – |
Preview watermark watermark | Text | – |
Address for finding a lawyer expertUrl | Link | – |
Privacy notice address privacyUrl | Link | – |
Show a fictional example showSample | On / off | false |
Note at the bottom disclaimer | Long text | Asiakirjapohja on tehty tavallisia tilanteita v… |
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
Section Try it financing
An instalment calculator: price, down payment, interest and term give the monthly instalment and the total.
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.
Poll with results
Section Try it poll
A poll with results: the visitor votes for one option and sees at once how others answered.
The example shows how the poll looks; the vote button is disabled because a poll is tied to the site's own saved poll.
Settings (8)
| Setting | Edited as | Default |
|---|---|---|
Heading heading | Text | – |
Introduction intro | Formatted text | – |
Question question | Text | Mikä päivä sopii talkoisiin parhaiten? |
Options (one per line) options | Long text | Lauantai 9.5. Sunnuntai 10.5. Lauantai 16.5. |
Allow several choices multiple | On / off | false |
Results on the page results | Choice | After voting |
Poll closes closesAt | Date and time | – |
Signed-in customers only customersOnly | On / off | – |
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.
Voting advice (yes/no)
Section Try it vaalikone
A voting advice tool: the visitor answers statements yes or no and sees how the candidate's views match their own.
Settings (9)
| Setting | Edited as | Default |
|---|---|---|
Heading heading | Text | Vaalikone |
Introduction intro | Long text | Vastaa väitteisiin ja katso, missä olemme samaa… |
Candidate name in the results candidateName | Text | – |
Visitors can mark a question important to them visitorWeights | On / off | true |
First button text cta1Label | Text | – |
First button address cta1Url | Link | – |
Second button text cta2Label | Text | – |
Second button address cta2Url | Link | – |
Share the result button share | On / off | true |
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.