Skip to main content

Accordions

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

On this page
Implementations

Specifications

Default

  • Header Font: Open Sans Semibold 16px
  • Body Font: Open Sans Regular 14px
  • Horizontal Padding: 4px
  • Collapsed Height: 48px

Compact

  • Header Font: Open Sans Semibold 14px
  • Body Font: Open Sans Regular 12px
  • Horizontal Padding: 4px
  • Collapsed Height: 32px
Accordion Title
Anim cliche, high life terry richardson ad squid. 3 wolf moon official, non skateboard dolor brunch. Food truck quinoa. Brunch 3 wolf moon put a bird on it squid single-origin coffee null assume shoreditch et. Nihil anim keffiyeh helvetica, craft beer labor.
High life terry richardson ad squid. 3 wolf moon official, non skateboard dolor brunch. Food truck quinoa. Brunch 3 wolf moon put a bird on it squid single-origin coffee null assume shoreditch et. Nihil anim keffiyeh helvetica, craft beer labor.
Non skateboard dolor brunch. Food truck quinoa. Brunch 3 wolf moon put a bird on it squid single-origin coffee null assume shoreditch et. Nihil anim keffiyeh helvetica, craft beer labor.
  • Accordions can display directly on the page or in a card container.
  • The arrow icon acts as an affordance to indicate the functionality of the accordion and as a visual marker of the state of the accordion through its rotation and direction.
  • When stacking multiple accordions, use stack space constants to add margin-bottom to the block element.
Accordion Title
high life terry richardson ad squid. 3 wolf moon official, non skateboard dolor brunch. Food truck quinoa. Brunch 3 wolf moon put a bird on it squid single-origin coffee null assume shoreditch et. Nihil anim keffiyeh helvetica, craft beer labor.
high life terry richardson ad squid. 3 wolf moon official, non skateboard dolor brunch. Food truck quinoa. Brunch 3 wolf moon put a bird on it squid single-origin coffee null assume shoreditch et. Nihil anim keffiyeh helvetica, craft beer labor.
high life terry richardson ad squid. 3 wolf moon official, non skateboard dolor brunch. Food truck quinoa. Brunch 3 wolf moon put a bird on it squid single-origin coffee null assume shoreditch et. Nihil anim keffiyeh helvetica, craft beer labor.
Accordion Title
high life terry richardson ad squid. 3 wolf moon official, non skateboard dolor brunch. Food truck quinoa. Brunch 3 wolf moon put a bird on it squid single-origin coffee null assume shoreditch et. Nihil anim keffiyeh helvetica, craft beer labor.
high life terry richardson ad squid. 3 wolf moon official, non skateboard dolor brunch. Food truck quinoa. Brunch 3 wolf moon put a bird on it squid single-origin coffee null assume shoreditch et. Nihil anim keffiyeh helvetica, craft beer labor.
high life terry richardson ad squid. 3 wolf moon official, non skateboard dolor brunch. Food truck quinoa. Brunch 3 wolf moon put a bird on it squid single-origin coffee null assume shoreditch et. Nihil anim keffiyeh helvetica, craft beer labor.
Do use the without border variation to omit the border from the first accordion in a stack when it may conflict with other visual elements, like a Module Container. Don’t use an unnecessary border to avoid visual noise.

Colors

ElementPropertyColor
ButtonColor Trimble Gray White
#252a2e
#ffffff
Color (Disabled) Gray 2 White
e0e1e9
#ffffff
Background White Trimble Gray
#ffffff
#252a2e
Background (Hover/Active/Focus) Gray 0 Gray 8
e0e1e9
#464b52
Border-Bottom Gray 1 Gray 6
#cbcdd6
#6a6e79
IconColor Trimble Gray White
#252a2e
#ffffff

Behavior

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

Editorial

  • Keep titles to five words, if possible, to avoid wrapping.
  • Use title case and capitalize prepositions of four letters or more.
View on GitHub