COMPONENTS
Accordions enable multiple content sections to be displayed in a limited space and collapsed or expanded by the user.
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 Item
- Label
- Chevron
- 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.
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.
When nesting accordions, the nested accordions take on the styling of the interior panels.
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.
An expanded accordion item reveals an accordion panel with additional content. The panel is expanded and collapsed with a slide animation.
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.
Accordions can be displayed in large, medium and small sizes.
Accordion panels can have a variety of content types added into them. Some custom layout examples are shown below. Status can be added to the accordion item title bar. There are four types of status — none, error, warning and success.
Note: Status is not an explicit property in the GS UI Toolkit, but can be built through custom overrides.
Summary accordions shows basic information in its collapsed state and more details when expanded.
- 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.
Contents