Status colour Yellow title ongoing
| Table of Contents |
|---|
Description
An accordion is a list of headers that hide or reveal additional content when selected.
...
...
...
Usage & BehaviorUsage & Behavior
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.
structure
The Accordion structure:
...
Header
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.
...
...
Header
Header content of the Accordion can wrap, but it is recommended that it is short and to the point.
BG Color
#BBBBBB
Font
BOLD, 12px, #4A4A4A
Height
30px
Right icon
...
Scrolling
Accordions take up 100% width of their parent container.
Only 1 content can be viewed at a time
States
| Structure Element | Description |
|---|---|
Close |
|
Open |
|
Hover |
|
| Selected Content mark |
|
Interaction
<<for example, how to change a value – type, arrows, use slider>>
...
- You can Click on the entire accordion Section Header
Best practices
When to use the accordion component
...