Accordion
Last Updated on Sep 29, 2022
An accordion allows users to expand and collapse sections of nested content. They hide content to help reduce page scrolling and improve focus. Users can choose to show or hide detailed information as they need.
Component Variants
Design Principles
- Accordions are often headers to sections of content. They can default to being open or closed. They should be used when space is limited and the section can be hidden without inhibiting the user’s workflow.
- Accordions can be inside or outside of cards.
- Nesting accordions is acceptable, but should be
- Accordion-tiles should only be used in smaller containers or panels. The whole section of an accordion-tile will expand or collapse when clicked. Accordions can be used in panels, but accordion-tiles are preferred.