Grundelemente

Button – Alle Varianten

Der Button unterstützt sechs visuelle Typen: primary (Standard), primary-new, secondary, disabled, tertiary-a und tertiary-b. In YAML-Seiten ist immer der Link-Button verfügbar (href + title erforderlich). Submit- und Icon-Buttons sind nur programmatisch nutzbar. Felder: 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, Standard md).

Absatz-Varianten (Paragraph)

Felder: text (erforderlich), bold (optional), muted (optional), size (xs/sm/md/lg, Standard md), color (black Standard, green, blue), align (left Standard, justify), links[] (eingebettete Hyperlinks – Platzhalter dollar-null, dollar-eins im Text).

Normaler Absatz – Standard-Textblock ohne besondere Formatierung.

Fetter Absatz (bold true) – Hervorgehobener Text für wichtige Informationen oder Zwischenüberschriften.

Gedämpfter Absatz (muted true) – Für sekundäre Informationen oder ergänzende Hinweise mit geringerem Kontrast.

Kleiner Absatz (size sm) – Ideal für Fussnoten, Quellenangaben oder rechtliche Hinweise.

Absatz mit eingebettetem Link: Weitere Informationen finden Sie auf cembra.ch oder besuchen Sie unserer Kontaktseite .

Listen (List)

Bullet-Liste (Standardtyp):

• Erster Punkt der ungeordneten Liste

• Zweiter Punkt mit weiteren Details

• Dritter Punkt als letztes Element

Nummerierte Liste (type number):

1. Schritt 1 – Online-Formular ausfüllen

2. Schritt 2 – Dokumente hochladen

3. Schritt 3 – Antrag absenden und auf Rückmeldung warten

Tabelle (Table)

Die klassische Tabelle unterstützt eine optionale Kopfzeile (header), freie Spaltenbreiten (colWidths) und einen Naked-Modus ohne Rahmen (naked true).

Neue Tabelle (NewTable)

Die NewTable unterstützt Gruppenheader (group mit sub-Spalten), mehrere Zeilen pro Zelle (colRows) sowie Paragraph- und Link-Inhalte innerhalb von Zellen.

Tabelle ohne Rahmen (naked true)

Mit naked true entfällt der äussere Rahmen der Tabelle – die Zellen erhalten keinen sichtbaren Rand. Nützlich für Informationstabellen, die optisch in den Seitentext eingebettet wirken sollen.

Neue Tabelle – Gruppenheader und colRows

Der group-Header fasst mehrere Spalten unter einer gemeinsamen Überschrift zusammen (head + cols). Das colRows-Feld erlaubt mehrere Zeilen innerhalb einer einzelnen Zelle – nützlich für Werte mit Zusatzzeile (z. B. Preis + Hinweis).

Überschrift (Heading)

Heading rendert eine semantische Überschrift innerhalb des content-Arrays. Der einzig gültige Typ ist h4. Mit dem optionalen anchor-Feld wird eine HTML-ID für Anker-Links gesetzt. Felder: title (erforderlich, zweisprachig), type (immer h4), anchor (optional).

Beispiel-Überschrift ohne Anker

Beispiel-Überschrift mit Anker

Hyperlink (Link)

Link rendert einen eigenständigen Hyperlink. href-Präfixe: https://, page:, mailto:, tel:, # (Anker). Mit highlighted true erscheint der Link als hervorgehobener CTA-Link. Felder: href (erforderlich), title (erforderlich, zweisprachig), openInNewTab (optional), noFollow (optional), noReferrer (optional), highlighted (optional).

Einfacher externer Link Interner Link (page:) Hervorgehobener CTA-Link (highlighted true)

Bild (Image)

Image rendert ein responsives, next-gen optimiertes Bild (AVIF/WebP). src und alt sind erforderlich. Mit quality kann die Komprimierungsqualität gesteuert werden (LOW / MID Standard / HIGH oder Zahl 0–100). Felder: src (erforderlich), alt (erforderlich, zweisprachig), quality (optional).

Anklickbares Bild (ImageLink)

ImageLink kombiniert ein optimiertes Bild mit einem Hyperlink. Felder: href (erforderlich), image.src + image.alt (erforderlich), openInNewTab (optional), width (optional, Pixel), height (optional, Pixel).

Eingebetteter Rahmen (Iframe)

Iframe bettet externe Inhalte über ein HTML-

Karte (Map)

Map bettet eine Google Maps-Karte für einen bestimmten Standort ein. Der Wert von location wird als Suchanfrage an die Google Maps Embed API übergeben. Felder: location (erforderlich, zweisprachig).

Trennlinie (Divider)

Divider rendert eine 1 px breite hellgraue horizontale Linie und dient dazu, Inhaltsbereiche visuell voneinander zu trennen. Das Element nimmt keine Felder entgegen – der YAML-Eintrag lautet immer divider: {}. Der vertikale Abstand (my-8 / md:my-12) ist fest eingebaut.

Sonderzweck-Komponenten

Die folgenden Komponenten sind komplex konfigurierbar und werden typischerweise einmalig auf bestimmten Seiten eingerichtet. Sie sind hier der Vollständigkeit halber aufgeführt; für vollständige Beispiele siehe die verlinkten Referenzseiten.

chatbox – KI-Chat-Widget mit aufklappbarer Oberfläche, Nachrichten- Threading, Tipp-Indikatoren und Beispielfragen. Felder: title, placeHolder, paragraph, componentHeight, errorMessage (mit Unterfeldern), welcomeMessage (optional), sampleQuestions (optional), chatType (optional), streamAnswers (optional). Referenzbeispiel: src/content/pages/kundencenter/eservice/faqs/index.yaml

contactForm – Mehrstufiges Kontaktformular mit Betreff-Auswahl, Nachricht, Name, E-Mail und Geburtsdatum. Alle Beschriftungen (40+ Felder) werden über das labels-Objekt konfiguriert. Optionale Felder: subjects (Betreff-Optionen), apiUrl. Referenzbeispiel: src/content/pages/kundencenter/kontakt/kontakt-per-email.yaml

ctaForms – Raster aus CTA-Formular-Widgets. Wert ist ein Array aus Enum-Werten; gültige Einträge: CASH_LOAN, FIND_BRANCH. Beispiel: ctaForms: [CASH_LOAN, FIND_BRANCH]