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)DirectionThe dir global attribute in HTML changes the direction of text and other content within an element. It's most often used on the <html> tag to set the entire page's direction, which is crucial for supporting languages that are written from right to left (RTL), such as Arabic and Hebrew. For example, using <html dir="rtl"> makes the entire page display from right to left, adjusting the layout and text flow accordingly.LTR (left-to-right)RTL (right-to-left)Text ZoomTo ensure accessibility and comply with WCAG 2.2 AA standards, it is mandatory for web content to support text resizing up to at least 200% without loss of content or functionality. Using relative units like rem is a best practice for achieving this, as they allow the text to scale uniformly based on the user's browser settings.100%130%150%200%