Accordion
This page contains examples of the usage of the Accordion component with different configurations and styling variations.
Default
In this example the default values for Accordion component are used:
- Title paragraph format is h3
- No expanded items
Check other components:
This is h2 heading
This is h3 heading
This is h4 heading
This is h5 heading
This is h6 heading
This is a normal paragraph
Quote: Morbi dignissim lectus ut cursus condimentum. Phasellus nec lorem eros. Donec luctus metus sed aliquam semper. Cras tortor neque, pretium quis tincidunt non, condimentum id dui.
This is preformatted: donec non est erat. Morbi fermentum.
No results found
1
/
Accordion item with Anchor
This example illustrates the behavior of a hiperlink linked to a panel inside an Accordion. When clicking on the anchor link, the Accordion panel which contains the linked component is expanded (if it was collapsed) and the page scrolls to this panel.
This is achieved by adding an ID to the component inside the accordion and using it as an hyperlink. In this example, the Teaser panel in the accordion below will be expanded when clicking on this anchor: Anchor link to accordion teaser item.
Check other components:
This is h2 heading
This is h3 heading
This is h4 heading
This is h5 heading
This is h6 heading
This is a normal paragraph
Quote: Morbi dignissim lectus ut cursus condimentum. Phasellus nec lorem eros. Donec luctus metus sed aliquam semper. Cras tortor neque, pretium quis tincidunt non, condimentum id dui.
This is preformatted: donec non est erat. Morbi fermentum.
Container and background styles
When the Accordion component is placed inside a container, its styles are adapted to the background colour of the container.
Container with full page width and primary light background
Check other components:
This is h2 heading
This is h3 heading
This is h4 heading
This is h5 heading
This is h6 heading
This is a normal paragraph
Quote: Morbi dignissim lectus ut cursus condimentum. Phasellus nec lorem eros. Donec luctus metus sed aliquam semper. Cras tortor neque, pretium quis tincidunt non, condimentum id dui.
This is preformatted: donec non est erat. Morbi fermentum.
Container with background full page width and primary dark background
Check other components:
This is h2 heading
This is h3 heading
This is h4 heading
This is h5 heading
This is h6 heading
This is a normal paragraph
Quote: Morbi dignissim lectus ut cursus condimentum. Phasellus nec lorem eros. Donec luctus metus sed aliquam semper. Cras tortor neque, pretium quis tincidunt non, condimentum id dui.
This is preformatted: donec non est erat. Morbi fermentum.
Container with default width and secondary light background
Check other components:
This is h2 heading
This is h3 heading
This is h4 heading
This is h5 heading
This is h6 heading
This is a normal paragraph
Quote: Morbi dignissim lectus ut cursus condimentum. Phasellus nec lorem eros. Donec luctus metus sed aliquam semper. Cras tortor neque, pretium quis tincidunt non, condimentum id dui.
This is preformatted: donec non est erat. Morbi fermentum.
Container with default width and secondary dark background
Check other components:
This is h2 heading
This is h3 heading
This is h4 heading
This is h5 heading
This is h6 heading
This is a normal paragraph
Quote: Morbi dignissim lectus ut cursus condimentum. Phasellus nec lorem eros. Donec luctus metus sed aliquam semper. Cras tortor neque, pretium quis tincidunt non, condimentum id dui.
This is preformatted: donec non est erat. Morbi fermentum.
