ACCORDTION STACK

A compact collection of content.

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.

Landscape image

Desktop

Mobile

Square image

Desktop

Mobile

Design specs

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:

  1. Regular text
  2. Bold text
  3. Italic text
  4. 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

When to use

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's and Don'ts

DO: Combine the layout variations in separate accordions.

DON’T: Mix the variants in the same accordion.