Design

 

Types

• Default: the default accordion, a container that can be clicked to expand content within.

 

• Error accordion (being phased out): a condensed alternative to the Error Banner that's used exclusively in the campaign, template, and experiment editor sub-nav to inform marketers there are errors in the content or configuration of the resource.
  
  This component will be phased out in a future update of the Editor in favor of the Error Banner.

Structure

Accordions consist of

• Title - The title can contain text or images that describe the grouping contained within the content block.
• Trigger - The trigger will often float to the right of the container. It will be an icon button containing either a chevron down (expanded) or a chevron right (collapsed).
• Content - Content block that is shown when the accordion is expanded.

Note that multiple accordion items can be expanded at one time.

States

• Collapsed: shows the container title and condenses the container size; can be expanded by clicking the the container.
• Expanded: shows the container title and expanded content block; can be collapsed by clicking the the Title row of the container (the same are that was clicked to expand it).

Guidelines

Content

• Don't overload each panel with too much content. Accordions are best for concise, digestible sections of information—two to three sentences of content is a good rule of thumb if the accordion content is text only.
• Ensure that the content within each accordion panel is grouped logically. Use accordions for independent sections of content that can be expanded or collapsed.

Accessibility

• Make sure the accordion is accessible, including keyboard navigation and screen reader support.
• Use appropriate ARIA attributes.

Health