Accordion
Introduction
An accordion expands to reveal more relevant information if a user is interested in the topic. An accordion takes up less vertical space and as such is a possible solution when pages must have a lot of content.
An accordion expands to reveal more relevant information if a user is interested in the topic. An accordion takes up less vertical space and as such is a possible solution when pages must have a lot of content.
Use this component when a page has a lot of information. Accordions make content easily scannable and only reveals information to a user when they decide they want to see more about the topic.
A primary use case for accordions across both sites is for frequently asked questions.
There are no specific component properties at this time.
The accordion is available for use in the following frames:
The accordion component consists of two parts:
(1) Accordion listing:
(2) Accordion item(s):
Both the heading and description are required for the accordion to work successfully.
You must first create the accordion item, and once complete, select it to show up in the accordion listing (the Accordion items field in the listing component).
Color and Link are deprecated and are not currently in use. They are slated for removal.
No imagery is used on the accordion component.
If using the title field, there is a standard of 46 pixels between the heading and the first question.
When you expand an accordion item, there is 16 pixels between the question and the answer.
The accordion collapse or expand icon is 36 x 36 pixels.