Use accordions to selectively show and hide sections of information.
Use accordions to display secondary information that’s useful, but also a distraction from the primary task.
Accordions have 2 variations
1. Default variant
2. Brand variant
Usage
Use accordions to break down longform content into readable, digestible information
Don’t put important actions or essential information inside an accordion
Set a single accordion panel to be open by default if needed. This makes it more likely that the content will be read
If you're planning to use just one standalone segment of an Accordion, use the brand colour variant
Writing accordion content
In general, accordion content is information that’s useful to add, but would distract from the customer journey if we included them on the page.
This means accordions work best with content that’s more tertiary, like the fine print of a legal disclaimer, or details on how kWh are measured.
- keep headlines brief but descriptive
- highlight the most critical information in a section - accordions work better when the user only needs a few key pieces of information
- keep headlines functional
-
sparingly include text links and secondary links inside accordions
- include key product benefits or feature information inside an accordion
- add multiple paragraphs in the panel copy
- include subheadings - the format should consistently be: headline + panel copy
- always use questions as headings - Q&A content is often presented as accordions, but they’re not exclusively for Q&A
- put accordions inside of accordions
- use an accordion for a single element - use a disclosure component instead
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v3+ |
|
Web (@ovotech/element) |
v3.1.0+ |
|
App (@ovotech/element-native) |
v3.1.0+ |
Related
External links