The Accordion Component allows you to organize content into collapsible sections. Users initially see only the headings (accordion labels) and can expand individual sections when needed.
It is particularly suitable for:
FAQ sections
structured information pages
extensive text content
technical or detailed explanations
Component Structure
When opening the Accordion Component, you can:
add or hide a headline
add or hide a subheadline
The actual content is created as individual accordion items.
Structure of an Accordion Item
Each item consists of:
a label (visible heading)
a content area, which becomes visible when expanded
Within the content area, you can insert additional components using the Plus icon.
Not all components are available within an accordion, as not every component is suitable for this structure. However, the available selection covers typical use cases.
The number of accordion items is not limited.
Settings per Item
Using the three-dot menu of an accordion item, you can:
copy the item
show or hide the item
assign a deep link (anchor)
Deep links allow you to link directly to a specific accordion item, which is especially useful for longer FAQ pages.
Color Scheme
You can assign a dedicated color scheme to the Accordion Component.
Components placed inside expanded sections can also have their own color scheme. If no separate scheme is assigned, they inherit the color scheme of the accordion.
Difference from the Tab Component
Accordions display multiple content sections vertically.
Tabs switch between content areas.
Accordions are better suited for FAQs and linear content.
Tabs are better for clearly separated topic areas.
Tips & Tricks
Use clear and concise labels.
Use accordions to visually reduce long pages.
Avoid deep nesting to maintain clarity.
Use deep links strategically for extensive FAQ structures.