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).

 

Best Practices

  • Prefer concise labels.
  • Never use alert messages inside an accordion : an open accordion should not show high priority information.
  • Always use a "+" icon to expand and an “-“ icon to close.
  • Use a Collapse all / Unfold all when grouping several accordions together.
The picture is showing a group of Accordions.
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