Der klassische Accordion (AccordionGroup) rendert aufklappbare Abschnitte mit blauem Hintergrund. Beim Öffnen eines Eintrags schliessen sich die anderen. Mindestens 2 Einträge sind erforderlich. Erlaubte Inhaltstypen: paragraph, list, image.
Was ist ein Accordion?expand_more
Ein Accordion ist ein UI-Muster, das Inhalte in aufklappbaren Abschnitten verbirgt. Es eignet sich für FAQs oder strukturierte Informationen, bei denen nicht alle Inhalte gleichzeitig sichtbar sein müssen.
Wann sollte ich Accordion verwenden?expand_more
Accordions eignen sich, wenn viele Inhaltssektionen vorhanden sind, aber nicht alle gleichzeitig sichtbar sein müssen. Sie sparen Platz und verbessern die Übersichtlichkeit auf der Seite.
Accordion mit Liste als Inhaltexpand_more
Erster Listenpunkt im Accordion
Zweiter Listenpunkt mit weiteren Details
Dritter Listenpunkt als letztes Element
Accordion mit Bild als Inhaltexpand_more
NewAccordion – Moderne Variante
Der NewAccordion (NewAccordionGroup) verwendet einen hellen Hintergrund mit Trennlinien. Er unterstützt zusätzliche Inhaltstypen im Vergleich zum klassischen Accordion: paragraph, list, image, grid und instructionCard. Mindestens 2 Einträge erforderlich.
Was unterscheidet NewAccordion vom klassischen Accordion? expand_more
Der NewAccordion hat einen weissen Hintergrund mit Trennlinien statt des blauen Hintergrunds beim klassischen Accordion. Zusätzlich unterstützt er InstructionCards und Grids als Inhaltstypen innerhalb des aufgeklappten Bereichs.
NewAccordion mit InstructionCard-Inhalt expand_more
sentiment_satisfied
Schritt 1
Diese InstructionCard ist direkt im NewAccordion-Inhalt eingebettet – etwas, das beim klassischen Accordion nicht möglich ist.
NewAccordion mit Bullet-Liste expand_more
Erster Punkt im NewAccordion
Zweiter Punkt mit zusätzlichen Informationen
Dritter Punkt als Abschluss
NewAccordion – Karten-Modus (isCard true)
Mit isCard true wird die gesamte Accordion-Gruppe in eine weisse Karte mit Padding und
-Trennlinien zwischen den Einträgen eingebettet. Optional können title und subtitle auf der Gruppe gesetzt werden, die dann oberhalb der Einträge erscheinen.
Häufige Fragen
Alle Antworten auf einen Blick
Was ist isCard true? expand_more
Mit isCard true wird die Accordion-Gruppe in eine weisse Karte eingebettet. Die Trennlinien zwischen den Einträgen werden als
-Elemente gerendert.
Wann sollte ich isCard true verwenden? expand_more
isCard true eignet sich, wenn der Accordion-Block visuell von der übrigen Seite abgegrenzt werden soll – z. B. für FAQ-Abschnitte oder strukturierte Hilfe-Inhalte auf weissem oder hellgrauem Seitenhintergrund.
Karussell (Carousel) – VCard Kennzahlen
Das Carousel zeigt VCards horizontal scrollbar an. Diese Variante verwendet KeyFigure-VCards (iconLeft + keyFigure + title + text). Mit highlighted true erscheint ein farbiger Hintergrund hinter dem Karussell.
Wichtige Kennzahlen
percent
Zinssatz
ab 5.95%
av_timer
Monate Laufzeit
12–84
monitoring
Maximalbetrag
CHF 250'000
Karussell (Carousel) – VCard mit Hintergrundfarbe
Diese Carousel-Variante verwendet Background-VCards (background + title + href) für navigierbare Kacheln mit farbigem Hintergrund und Link. Verfügbare Farben: blue, green, purple, red.
