Accordion
Accordions allow users to expand and collapse sections of content, facilitating efficient information organization.
- Product
- Provet
- Availability
- New Frontend
Usage
This section includes guidelines for designers and developers about the usage of this pattern in different contexts.
Do
- Use accordions to manage lengthy content: Implement accordions to organize extensive information, such as FAQs or detailed guides, allowing users to access specific sections without being overwhelmed by the full content.
- Employ accordions for step-by-step processes: Utilize accordions to guide users through sequential tasks, presenting each step individually to maintain focus and reduce cognitive load.
- Apply accordions when space is limited: In scenarios with constrained space, such as mobile interfaces, use accordions to present content compactly, enabling users to navigate information efficiently.
Don’t
- Avoid overcomplicating content areas: Refrain from adding non-essential links, buttons, or additional subsections inside the accordion content, as this can make the interface complicated and challenging to navigate.
- Don't neglect hover states: Ensure that interactive elements within the accordion have clear hover states to communicate interactivity effectively.
- Avoid inconsistent behavior: Ensure that the accordion's expand/collapse behavior is predictable and consistent to prevent user confusion.
Integration
This community asset is currently only available to use in the New Frontend for Provet.
Troubleshooting
If you experience any issues while using this community asset, please ask for support in the #vet-frontend Slack channel.