Button – All Variants
The button supports six visual types: primary (default), primary-new, secondary, disabled, tertiary-a and tertiary-b. In YAML pages, only the link-button is available (href + title required). Submit and icon buttons are only available programmatically. Fields: type (primary/primary-new/secondary/disabled/tertiary-a/tertiary-b), color (blue/blue-azure/green/green-light/purple/red/gray/blue-new), size (sm/md/lg, default md).
Paragraph Variants
Fields: text (required), bold (optional), muted (optional), size (xs/sm/md/lg, default md), color (black default, green, blue), align (left default, justify), links[] (embedded hyperlinks — use dollar-sign index placeholders in text, e.g. dollar-zero, dollar-one).
Normal paragraph – Standard text block without any special formatting.
Bold paragraph (bold true) – Highlighted text for important information or sub-headings.
Muted paragraph (muted true) – For secondary information or supplementary notes with lower contrast.
Small paragraph (size sm) – Ideal for footnotes, source references or legal notices.
Paragraph with embedded links: For more information visit cembra.ch or check out our contact page .
Lists
Bullet list (default type):
-
First item of the unordered list
-
Second item with additional details
-
Third item as the last entry
Numbered list (type number):
-
Step 1 – Fill in the online form
-
Step 2 – Upload your documents
-
Step 3 – Submit the application and wait for a response
Table
The classic table supports an optional header row, configurable column widths (colWidths) and a borderless naked mode (naked true).
| Name | Value | Note |
|---|---|---|
| Interest rate from | 5.95% | Credit-dependent |
| Duration | 12–84 months | Freely selectable |
| Maximum amount | CHF 250,000 | Per loan |
| Disbursement | After 14 days | Statutory withdrawal period |
New Table (NewTable)
The NewTable supports grouped headers (group with sub-columns), multiple rows per cell (colRows), and paragraph or link content inside individual cells.
| Product | Interest rate from | Duration |
|---|---|---|
| Personal Loan | 5.95% | 12–84 months |
| Car Loan | 5.95% | 12–84 months |
| Home Loan | 5.95% | 12–240 months |
Borderless Table (naked true)
With naked true the outer border of the table is removed — cells have no visible border. Useful for information tables that should blend visually into the surrounding page content.
| Field | Type | Required |
|---|---|---|
| title | Text (bilingual) | Yes |
| subtitle | Text (bilingual) | No |
| href | URL string | Yes |
New Table – Grouped Header and colRows
The group header combines multiple columns under a shared label (head + cols). The colRows field allows multiple rows inside a single cell — useful for values with a supplementary line (e.g. price + note).
| Product | Conditions | |
|---|---|---|
| Interest rate | Duration | |
| Personal Loan | 5.95% | 12–84 months |
| credit-dependent | freely selectable | |
| Car Loan | 5.95% | 12–84 months |
| credit-dependent | freely selectable | |
Heading
Heading renders a semantic heading inside the content array. The only valid type is h4. The optional anchor field sets an HTML id for in-page links. Fields: title (required, bilingual), type (always h4), anchor (optional).
Example Heading without Anchor
Example Heading with Anchor
Hyperlink (Link)
Link renders a standalone hyperlink. Supported href prefixes: https://, page:, mailto:, tel:, # (anchor). With highlighted true the link renders as a highlighted CTA link. Fields: href (required), title (required, bilingual), openInNewTab (optional), noFollow (optional), noReferrer (optional), highlighted (optional).
Simple external link Internal link (page:) Highlighted CTA link (highlighted true)Image
Image renders a responsive, next-gen optimised image (AVIF/WebP). src and alt are required. quality controls compression (LOW / MID default / HIGH or number 0–100). Fields: src (required), alt (required, bilingual), quality (optional).
Clickable Image (ImageLink)
ImageLink combines an optimised image with a hyperlink. Fields: href (required), image.src + image.alt (required), openInNewTab (optional), width (optional, pixels), height (optional, pixels).
Embedded Frame (Iframe)
Iframe embeds external content via an HTML iframe element. Height adjusts automatically to the content (iframe-resizer). The src field is bilingual — different URLs can be provided for different locales. Fields: src (required, bilingual).
Map
Map embeds a Google Maps view for a specific location. The location value is passed as a search query to the Google Maps Embed API. Fields: location (required, bilingual).
Divider
Divider renders a 1 px light-grey horizontal rule and is used to visually separate content sections. The element takes no fields — the YAML entry is always divider: {}. The vertical spacing (my-8 / md:my-12) is built in.
Special-Purpose Components
The following components are highly configurable and are typically set up once on specific pages. They are listed here for completeness; for full examples see the linked reference pages.
chatbox – AI chat widget with collapsible UI, message threading, typing indicators and sample questions. Fields: title, placeHolder, paragraph, componentHeight, errorMessage (with sub-fields), welcomeMessage (optional), sampleQuestions (optional), chatType (optional), streamAnswers (optional). Reference example: src/content/pages/kundencenter/eservice/faqs/index.yaml
contactForm – Multi-step contact form with subject selection, message, name, email and date of birth. All labels (40+ fields) are configured via the labels object. Optional fields: subjects (subject options), apiUrl. Reference example: src/content/pages/kundencenter/kontakt/kontakt-per-email.yaml
ctaForms – Grid of CTA form widgets. Value is an array of enum entries; valid values: CASH_LOAN, FIND_BRANCH. Example: ctaForms: [CASH_LOAN, FIND_BRANCH]