COMPONENTS

Accordion

Accordions enable multiple content sections to be displayed in a limited space and collapsed or expanded by the user.

accordion-image

Accordions can be used to group and hide content to keep an interface clean and reduce clutter. Accordions can be used to display only one or multiple panels at a time, depending on the use case.

Accordion anatomy
  1. Accordion Item
  2. Label
  3. Chevron
  4. Accordion Panel

Accordion has two core style types available — product and marketing. Product style is bolder and uses tighter spacing and marketing style is lighter and more spacious.

Accordion Style Types

Note: Marketing style is not yet available in the GS UI Toolkit. We are working towards including in a future version.

Accordions can be subtle or bold depending on how prominently they should be displayed.

Accordion Emphasis

When nesting accordions, the nested accordions take on the styling of the interior panels.

Accordion Nested

Note: Nested styles are not yet available in the GS UI Toolkit. We are working towards including in a future version.

Accordions have four styled states available — enabled, hover, focus and disabled.

Accordion states

An expanded accordion item reveals an accordion panel with additional content. The panel is expanded and collapsed with a slide animation.

Accordion states

A leading icon can be added before the title in an accordion item.

Note: A leading icon can be achieved through custom overrides in UI Toolkit and we are working towards releasing this property in a future version of UI Toolkit.

Accordion icon

Accordions can be displayed in large, medium and small sizes.

accordion sizes

Accordion panels can have a variety of content types added into them. Some custom layout examples are shown below.

Accordion status

Status can be added to the accordion item title bar. There are four types of status — none, error, warning and success. Status is not an explicit property in the GS UI Toolkit, but can be built through custom overrides.

Alt Text

Summary accordions shows basic information in its collapsed state and more details when expanded.

Alt Text
  • Make the entire title label area clickable to trigger expansion.
  • Ideal for use when you have no more than 10 modules of content.
  • Do not use if it is a priority to have your users see all content at once.