Accordions & Carousels

Accordion – Classic Variant

The classic Accordion (AccordionGroup) renders collapsible sections with a blue background. Opening one entry closes the others. Minimum 2 entries required. Allowed content types inside: paragraph, list, image.

NewAccordion – Modern Variant

The NewAccordion (NewAccordionGroup) uses a light background with dividers. It supports additional content types compared to the classic Accordion: paragraph, list, image, grid and instructionCard. Minimum 2 entries required.

NewAccordion – Card Mode (isCard true)

With isCard true the entire accordion group is wrapped in a white card with padding and hr separators between entries. Optional title and subtitle on the group appear above the entries.

Frequently Asked Questions

All answers at a glance

What is isCard true? expand_more

With isCard true the accordion group is wrapped in a white card. Separators between entries are rendered as hr elements.

---

When should I use isCard true? expand_more

isCard true is useful when the accordion block should be visually separated from the rest of the page – e.g. for FAQ sections or structured help content on a white or light-grey page background.

Carousel – Key Figure VCards

The Carousel displays VCards in a horizontally scrollable row. This variant uses KeyFigure VCards (iconLeft + keyFigure + title + text). With highlighted true a colored background appears behind the carousel.

Carousel – Background Color VCards

This Carousel variant uses Background VCards (background + title + href) for navigable tiles with a colored background and link. Available colors: blue, green, purple, red.

Carousel – VCards without Link

When href is omitted the VCard renders as a div instead of an a element. This is suited for purely informational tiles with no click target. KeyFigure VCards without href use title instead of href + title.

Search Bar

SearchBar renders an animated full-width search input with a conic gradient border. The placeholder appears centred with a search icon. The helper text (caia) appears below the input field. Fields: title (required, bilingual), placeholder (required, bilingual), caia (required, bilingual).