The following segment provides instructions for designers and developers regarding the appropriate utilization of this
component in various situations.
Do:
Use accordions to organize and display large amounts of content in a structured and efficient way.Group related content together within each accordion panel.Use clear and concise headings for each accordion panel to help users quickly understand what content is included.Make sure that each accordion panel is easily identifiable and distinguishable from the others.
Don't:
Don't use accordions for content that is essential or required for users to see. Users may not realize that they need
to expand the accordion panel to see the content, resulting in a poor user experience.Don't overuse accordions on a single page, as this can make the page feel cluttered and difficult to navigate.Don't use ambiguous or confusing labels for the accordion headings, as this can make it difficult for users to
understand what content is included in each panel.Don't overload the accordion panels with too much content, as this can make the component feel overwhelming and
difficult to use.Don't add a divider on top of the first item.