Status colour Yellow title ongoing
| Table of Contents |
|---|
Description
...
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 rowsection, however, follow the other padding specs below.
Section content should have a minimum of 3 rows
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.
...
| Structure Element | Description |
|---|---|
CloseSection header close |
|
OpenSection header open |
|
HoverSection header hover |
|
| Selected Content content mark |
|
| Section header with checkbox |
|
| Section header with warning |
|
| Open/Close section animation |
|
Interaction
- You can Click on the entire accordion Section Header
- Theres always one section open in the accordion, and only one
- Scrolling will be added to section content that exceed the height of the accordion container
- Hovering over section header will show a tooltip with the full name of the section header
Best practices
When to use the accordion component
...
| Zeplin link | Screen thumbnail |
|---|---|
| https://zpl.io/VkmX6dq | 
|
Code
<<a box containing the code - discuss with Femi>>
...