In order to give you a better service Airbus uses cookies. By continuing to browse the site you are agreeing to our use of cookies I agree

Accordion

The accordion allows you to expand or reduce a content section.

General guidelines

Accordion should be used to reduce cognitive workload on the screen. It’s an effective way to display content without having to create multiple pages. It is primarily used on pages with content (e.g.: product description, F.A.Q, etc.), but also in forms (to display secondary fields) or even in filter panels to have a section that can be enlarged or reduced.

The content inside the accordion may be editorial content: text, image, video etc.

It is possible to create accordion lists. Multiple accordions can be open simultaneously, either one by one or all at the same time (Collapse all / Unfold all).

The picture is showing a group of Accordions.
Best practices
Good practice about the use of the accordion

Always prefer clear and concise labels to facilitate reading and invite the user to scroll through the content.

Bad practice about the use of accordion.

Try to make the title as short as possible. It will bring clarity and more straightforward information.

Good practice about the use of accordion.

Always use a "+" icon to expand and an "-" icon to close.

Bad practice about the use of accordion.

Do not use another icon to expand or close accordions.

Good practice about the use of accordion.

Use a "Collapse all" and an "Unfold all" when grouping several accordions together. This allows the user to easily arrange the content visible on the screen.

Bad practice about the use of accordion.

Don’t make it hard for the user to arrange the content visible on the screen.

Visual guidelines

Behaviours

Accordion has 5 states: default (collapse), hover, active (open), focus and disable. All the area of the collapse 

Accordion is interactive, meaning that the user don’t have to target the icon or the label to interact with the component.

The picture is showing a list of Accordions with different interactive states.
Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top