The accordion stack module is used to present a list of headers stacked on top of one another, to hide and reveal associated content. This styling is currently used for e.g. the FAQ and How to sections.
Desktop
Mobile
Desktop
Mobile
Layout options
The Accordion stack module can consist of the following elements:
A. Headline*
B. Accordion headline*
C. Content area*
- Content headline, within accordion (optional)
- Paragraph
- Image (optional)
- Video (optional)
* required element
Combinations:
- The variations of the layout can be used together but under different accordions e.g no. 1 landscape image, no. 2 Square and no. 3 no image.
- Within an accordion, only one layout is used for repeated content.
See example under Do’s and don’ts
Headline
Character limit: 52
Do not exceed two lines of text on 360px screens
This module contains 3 headline types:
A. Module headline
- Functions as a title for the entire module, e.g FAQ or How to use.
B. Accordion headline
- The accordion headline is the text that will be shown when the accordion is closed. Generally this text describes the content of the specific accordion step eg. for How to use the accordion title for the first accordion step is: 1. Preparation.
C. Content headline
- Content headline is used to separate the paragraphs inside an expanded accordion step. Using ‘How to use’ as an example again the accordion step 1. Preparation has two content headlines inside: Cleaning and Activation. The content headline is optional and as such it can be omitted if it’s not necessary.
Content area
The content area can contain text, images and videos.
Text layout
Paragraph text has multiple layout options:
- Regular text
- Bold text
- Italic text
- Underlined for hyperlink
There is no character limit.
For more copywriting guidelines, please go to the Writing rules.
The text is always left-aligned.
Images
When using an image there are 3 layout options to choose from:
- Landscape image (ratio 16:9)
- Square image (ratio 1:1)
- No image
Landscape image layout can also be used for video content.
Colorways
The Accordion module is a collapsible content module and as such it is great at displaying large amounts of content in a small amount of space. Because the text is hidden away until the accordion is expanded it is best suited for eg. in depth explainer text with a narrower audience - however it is unsuited for promotional text that you want as many people as possible to read.
The module is currently used on Product detail page in the FAQ and the How to sections.
Examples of use
DO: Combine the layout variations in separate accordions.
DON’T: Mix the variants in the same accordion.