Expander

Expanders allow content to be collapsed and expanded to help categorize content and save space on the page or screen.

Props

Description display and label

Short description to set user expectations.

Indicator

Display an additional messaging attribute of the expander. Uses 16-icon.

States

Usage

Do

  • Contain 2-5 groups of content
  • Follow a logical order that guests are familiar with
  • Be arranged in order of importance
  • Have labels that are short, succinct and guide the guest

Don't

  • Do not contain short and small pieces of content (i.e. contain only 1 sentence or a few words)
  • Have more than 5 groups may lead to interaction cost and cognitive overload. Consider restructuring your content.

Kelsey

Principal Designer