Accordion

An accordion is a list of clickable headers that reveal or hide content, allowing large information to be displayed compactly.

Base Components

Overview

An accordion is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them. This component allows for the inclusion of large amounts of information in a compact space by collapsing and expanding sections as needed.
https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2F8atCSov6KVkMchm0ZT8zeZ%2FShipfaster-UI---v2.7-(LIVE)%3Fnode-id%3D124-40952%26t%3DIsUbgF59vjRUP8zU-1
When should you use them?

Use accordions when you need to organize content into manageable sections, especially when dealing with lengthy information that can be categorized. They are particularly useful for FAQs, product features, or detailed specifications.

Best practices when using Accordions:
  • Ensure that the headers are clear and descriptive to indicate the content within.
  • Limit the number of accordion items to avoid overwhelming the user.
  • Make sure that accordions are keyboard accessible and screen reader friendly.
  • Provide visual cues for expanding and collapsing sections.
  • Maintain consistency in the design and behavior of the accordion across the application.
Previous

No previous post
Up next

No next post