Design Accordion Components

Reusable accordion patterns for country FAQs, methodology notes, and d

Each item within an accordion consists of a header – which includes the title and any optional badge or metric – alongside an expand icon and a description area.

The header’s design utilizes full width with a minimum height of 44 pixels, ensuring sufficient space for clear presentation.

Chevron icon rotates on toggle; optional status chips.

The content region within each accordion item is designed to display text, preview charts, and provide links to detailed pages related to the topic.

To ensure a smooth user experience, hover/focus/active states are supported, along with a transition of no more than 220 milliseconds for height and opacity changes. This design also accommodates single-expand or multi-expand modes while maintaining synchronization between the icon state and the accordion’s overall expansion.

Use button with aria-expanded , aria-controls ; content has id and rol

A stacked layout is employed on mobile devices to optimize tap targets, while long titles are truncated with a tooltip for readability.

Titles should be concise and incorporate context related to the country or metric being presented (e.g., ‘Policy timeline’, ‘Funding sources’). Each item should focus on a single topic, complemented by source links at the end of the content.

Frequently asked questions