ONGOING
Description
An accordion is a list of headers that hide or reveal additional content when selected.
Types
Type | Usage |
---|---|
In use inside the filter pane | |
Usage & Behavior
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:
Structure Element | Description |
---|---|
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 Collapse Up |
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>>
<<use Click target to describe the interaction>>
Best practices
When to use the accordion component
- 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.
When to consider something else
- If users need to see most or all of the information on a page. Use well-formatted text instead.
- If there is not enough content to warrant condensing. Accordions increase cognitive load and interaction cost, as users have to make decisions about what headers to click on.
Usability guidance
- Make the entire header selectable. Allow users to click anywhere in the header area to expand or collapse the content; a larger target is easier to manipulate.
- Give interactive elements enough space. Make sure interactive elements within the collapsible region are far enough from the headers that users don’t accidentally trigger a collapse. (The exact distance depends on the device.)
Accessibility compliance
<<In general each component should be A11y complied, please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>
Focus management
<<How will the component work with keyboard only - without a mouse. Can be reference if written above
We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>
Screen reader support
<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>
Contrast & size compliance
<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>
Design
Zeplin link | Screen thumbnail |
---|---|
https://zpl.io/VkmX6dq | |
Code
<<a box containing the code - discuss with Femi>>