Accordion

This component is designed to offer a space-saving solution by allowing users to expand or collapse sections of content as needed.

Accordion pattern
When to use

The Accordion component is typically used towards the end of pages to answer specific questions that users might have around a particular feature, offering or anything else to do with Wise.

  • Questions/titles should be direct and short, but informative
  • Don’t overwhelm the user with too much information for each answer. Hyperlinks can always be added to further explain a point and guide the user to more information.

Accordion pattern with correct UX

Questions/titles should be direct and short, but informative

Accordion pattern with incorrect UX

Answers don’t help the user to understand anymore information

Content & localisation

To ensure that the Accordion component remains visually appealing and accommodates different languages, adhere to the following content limitations:

  • Headline: The headline should be short and precise. Ideally fitting across two lines.

  • Body Copy: The body copy should be precise and clear, keeping in line with our tone of voice. Avoid adding paragraphs of text that might overwhelm the user.

By following these guidelines, you ensure that the Accordion component can comfortably accommodate different languages while maintaining a consistent and visually pleasing design.

Accordion pattern in another language
Translated length +20%
Responsive layout

These are the examples of the Accordion component across different screen sizes.

Accordion pattern on mobile
Mobile - 390px
Accordion pattern on tablet
Tablet - 768px
Accordion pattern on desktop
Desktop - 1440px