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.

Usage
AccordionVisual2x
AccordionVisual2x

Use accordion in cases when it is necessary, especially for reasons of visibility on the screen and to have a section that can be enlarged or reduced. The content inside the accordion may be text, images or text fields.

Caption test

6 columns. On the right you can put a 6, 4 or 3 columns image. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ipsum risus, facilisis sit amet malesuada in, posuere ac augue. Duis orci mi, pellentesque id neque nec, maximus eleifend est.

Best Practices

- Use the accordion to show information that is not high priority (error messages, etc.).

- Use the accordion for a subject with the same content.

- Allow accordions group to be open simultaneously.

- Prefer short and concise labels.

 

Placement

Accordions are primarily used on pages with content (e.g.: product description, fact sheet...), but also in forms (to display secondary fields) or even in filter panels.

Visual

Appearance

Accordions have an action icon on their right side: a "+" icon to expand and an “-“ icon to close.

Behavior

It is possible to create accordion lists. When doing so, they may all be opened simultaneously.

Back to top