Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Accordion

Accordions show and hide information that is not necessary at all time with one click.

Guidelines

Short description

Accordions can be used to divide and collapse information that is not necessary to see all at once, i.e FAQ, Terms and Conditions. It structures content and can make it easier for the user's eye to find content, since we are showing the headers (whilst hiding the detailed information). It works especially well when users know what they are looking for.

When and how to use it

This component is best suited for plain text, lists, tables and inline links. The header "cell" can contain a header only, or a header with a sub-line.

We would like to point out that scrolling is your friend. You can choose to present "longer" content on one page without hiding it in an collapsable component. 

The accordion hides the majority of the content. Therefor it is not recommended for interactive components that requires the user to interact (inputfields, call-to-action buttons, etc) or entire user flows.

Alternative

If there is more complex content, consider splitting up the information by using sub-pages or tabs which will not hide the content.

Behaviour

The default accordion is collapsed with the chevron pointing down. There is a grey hover on the header "cell". When the user clicks anywhere on the "cell", the expanded area is displayed and the chevron points up. The expanded content background is white or grey, depending on what suits the situation best. 

Examples

Let's say the user is interested in opening an account. The information about the account can be divided into categories such as “About”, “How do I open an account” and “Terms and conditions”. With the accordion, the user gets a quick overview of the information and can decide what header "cell" to expand to read more.

Do's and don'ts

  • Use the accordion for FAQ, Terms and Conditions, etc.
  • It is allowed to place the chevron to the left or right of the header.
  • Avoid placing heavy content, such as entire flows, videos or interactive components, in a collapsable component.
Specification

Measurements

Desktop

Measurements for desktop

Mobile

Measurements for mobile

States

Desktop

States for desktop

Mobile

States for mobile

  • Hover: Grey 100
  • Line: Grey 200
  • Expanded background can be white or Grey 100

 

  • Grey 200
  • White

Related patterns & components

Page last updated

Feedback

Was this page helpful?