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.
structure
Header
...
Default
The first section content in the accordion should be open when first loading the page.
structure
- Header
- Header text can wrap, but it is recommended that it is short and to the point.
- The chevron icon can be found on the LUX Icon Font.
- Content
- There is no limit to the height of an open section, however, follow the other padding specs below.
- Section content height should have a minimum of 3 rows.
- The width of an accordion varies based on the content, layout, and page design.
...
...
- Scrolling
- Accordions take up 100% width of their parent container.
Only 1 content can be viewed at a time
...
- Scrolling will be added to section content that exceed the height of the accordion container
States (TBD - not final design)
| Structure Element | Description |
|---|---|
Section header close |
|
Section header open |
|
Section header hover |
|
| Selected 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 oneScrolling will be added to section content that exceed the height of the accordion container
- Only 1 content can be viewed at a time, when opening a new section, the already open section will close automatically
- when closing an open section, the next section in the according will open automatically, closing the last section in the accordion will open the section above him automatically
- Hovering over section header will show a tooltip with the full name of the section header
Transitions
Clicked Section will side open while the former open section in the accordion will close at the same time
Best practices
- For long lists, consider using search
- Use clear labels - Accordions hide content, so the labels need to be clear.
When to use the accordion component
...