Porsche Design SystemSearchNavigate to GitHub repository of Porsche Design SystemOpen sidebar
ConfiguratorExamplesUsageAccessibilityAPI
Accordion Usage 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.
Global settingsThemeChanges the theme of the application and any Porsche Design System component. It's possible to choose between forced theme light and dark. It's also possible to use auto, which applies light or dark theme depending on the operating system settings automatically.LightDarkAuto (sync with operating system)DirectionChanges the direction of HTML elements, mostly used on<html> tag to support languages which are read from right to left like e.g. Arabic.LTR (left-to-right)RTL (right-to-left)AutoText ZoomChanges the text size and values with unit rem or em relatively. This setting can be defined in browser settings for any website or by an application itself on<html> tag. To achieve WCAG 2.2 AA compliance it's obligatory to support text zoom up to at least 200%.100%130%150%200%