Description

...

An accordion should be used when 

• If users will only need a few specific pieces of content within a page.
• If you have only a small space to display a lot of content.

General guidelines

Internal Logic

The accordion component delivers large amounts of content in a small space through progressive disclosure.

• The user gets key details about the underlying content and can choose to expand that content within the constraints of the accordion.
• Accordions work especially well whenever vertical space is limited.

Text

Use clear labels - Accordions hide content, so the labels need to be clear. 

...

Header content of the Accordion can wrap, but it is recommended that it is short and to the point.

Content

There is no limit to the height of an open row, however, follow the other padding specs below.

The width of an accordion varies based on the content, layout, and page design. The chevron icon can be found on the LUX Icon Font. 

Scrolling

Accordions take up 100% width of their parent container.

...

...