Accordion

Accordions and tabs are very similar ways of structuring information. Here are some guidelines for deciding when to use accordions or tabs or when to consider another solution:

When to use an accordion:

• If there are too much related information to show within a limited space
• If the information is overwhelming when displayed all at once
• If the information can be grouped into logical categories
• If the user does not need to see all the information at once

When to use tabs:

• If there is a small number of categories that are unlikely to change or expand
• If the content needs a larger area or the whole page
• If the categories should function more like navigation than a show / hide toggle

When to consider something else:

• If there is enough space to show the content all the time
• If the content makes more sense when viewed at once
• If the user is likely to read all the content
• If the content cannot be logically grouped into tabs or accordions

Accordions should always stay open until the user chooses to close them — do not select ‘Single item expansion’ checkbox.

Do not use this component on assertive or accent container backgrounds.

The Accordion Title renders HTML heading elements — h2 (this is the default setting), h3, h4, h5, h6.

There are certain components that should never appear in an accordion. The following components cannot be added within the accordion panel:

• Accordion
• Breadcrumb
• Navigation
• Tabs

The following components can be added within an accordion, but can only be used after careful consideration due to the size and content of these components.

• Super Hero
• Teaser

Only add a Super Hero or a Teaser component to an accordion if there is enough space and if the content makes it truly necessary. If adding a Teaser component, it is strongly recommended to use the card style instead of the hero style.

Stoplight icon accordions are only used for safety ratings. Do not use in any other use case. Do not mix bold text and regular text in the stoplight style. This will break the style.

Stoplight colors cannot be combined within a single accordion group. If you have a mixed list of stoplight icon accordions, the accordion groups must be added separately and the top spacing removed from the preceding groups.

Accordions with h2, h3, and h4 Titles have the same top margin, and accordions with h5 and h6 Titles have the same top margin. The top margin is applied to the top of the component