ACCORDION
This component provides a space-efficient way to show or hide sections of content as needed.
WHEN TO USE
The Accordion component is often used at the end of pages to address common user questions about a feature, offering, or topic.
Keep titles short, clear, and informative.
Avoid overwhelming users with long answers. use links to provide additional details when needed.
Questions or titles should be clear, concise, and informative
Answers don’t provide any additional useful information
CONTENT
To keep the Accordion component visually consistent and easy to read, follow these content guidelines:
— Headline: Keep headlines short and precise, ideally fitting within two lines.
— Body Copy: Keep body text clear and concise. Avoid long paragraphs that may overwhelm the user.
Following these guidelines ensures a clean, consistent, and user-friendly component.
Best practice for clear and concise headlines and body text in the accordion component
RESPONSIVE LAYOUT
These are the examples of the Accordion component across different screen sizes.
Mobile - 360px
Desktop - 1920px