Overview

Collapsible components allow users to expand or collapse long blocks of content.

When creating collapsible components specify

• Content - Text, images, cards, cells, etc contained within the block that can be expanded or collapsed. The content can also be rendered above or below the trigger.
• Trigger - Component can be triggered by a click on button or text. Icons can be used to denote whether the component is currently expanded or collapsed.
• Transition - Transitions allow the content to gracefully ease in and out. ex. transition={{duration: '150ms', timingFunction: 'ease'}}

 

Buttons

Example is triggered by a ghost button to show or hide additional cards

Collapsed

Expanded

Accordions

Example is triggered by an icon button to open and close the accordion.

Accordion ClosedInspect

Accordion Open

Guidelines

The collapsible component should:

• Be used to progressively disclose information that is not immediately relevant or lower priority
• Not be used to hide errors or critical information

Use cases

 

Overall performance collapsed

By default, overall performance only displays the first ten metrics to avoid overwhelming the user and preserving vertical space on the page. When a user clicks on the button to "Show all 10 metrics" the content block will expand to show the remaining cards. In this example 10 should be a dynamic value based on the number of metrics selected. By default a maximum of 8 metrics cards are shown to the user. If 8 or fewer metrics are selected the trigger button to expand the cards is hidden. The number of metrics shown, in this case 10, should also be updated dynamically as the users updates the number of metrics selected.

 

Overall performance expanded

In this example, the content block is rendered above the trigger. Depending on the page the content could appear above or below the trigger button, when expanded.