Expandables

Expandables are used for displaying non-essential information on a page.

Repository

UseView code

The find function will not discover information hidden by a collapsed expandable, so use good judgement in deciding which information to hide.

Non-javascript users should default to the expanded state. Otherwise, the default state (expanded or collapsed) will depend on the circumstance.

StyleView code

Standard expandables feature a colored bar, a header, the expand/collapse minicon within a circle and a label (if space allows). Ideally, the entire bar is actionable. The header should clearly indicate what the user will see when the content is expanded. It should not be a call to action.

StatesView code

Normal

  • Gray 20% bar
  • Pacific Blue minicon

Hover/Focus

  • Grey 50% bar
  • Pacific Blue minicon

The header should be addressable by the keyboard to ensure keyboard users can open the expandable. It should match the hover state.