Skip to main content

Accordions

The accordion element delivers large amounts of content in a small space through progressive disclosure.

Types

Accordions come in two sizes to accommodate space availability on the page or within a Card. Default size should be used when accordions display directly in the main content container on the page. Compact size is useful, when the accordion displays within a smaller container (e.g. card) or smaller section of the page.

Specifications

Type Example Height
Default

54dp
Focus

54dp
Subtitle

72dp
Line Below

72dp

Note: In-cab size only. See mobile patterns (coming soon) for smaller options if required.

Behaviors

  • Accordions allow a single section to expand at one time, while automatically collapsing the section that loses focus (default behavior), or they allow for all sections to expand at the same time.
  • When an accordion expands and collapses, only its height should change; its width should stay consistent.
  • The expand-and-collapse functionality of an accordion is tied to the entire header of the element with additional actions being triggered only by interaction within the bounds of their related UI element.
  • Avoid “nested” accordions — that is, collapsible content within collapsible content. This type of pattern goes against UX best practices.

Progression

State Background Line Below Line Above
Default

Focus

Disabled

Expanded

Editorial

  • Keep titles to five words, if possible, to avoid wrapping.
  • Use title case and capitalize prepositions of four letters or more.
Last updated December 6, 2022.