Skip to contentPorsche Design System
You are currently viewing an earlier release of the Porsche Design System.Switch to the latest Porsche Design System documentation.
SearchGitHub repository of Porsche Design SystemOpen settings sidebar
Popover Table of Contents The popover displays contextual information or actions in a floating layer anchored to a trigger element. It helps surface secondary content on demand without navigating away from the current context, keeping the primary interface clean while remaining accessible. Local market switch On entering the site, a popover anchored to the globe icon in the header suggests switching to the user's local market for correct content and pricing. It is shown on load and can be dismissed via an outside click or the Escape key.
Source CodeView Fullscreen
Priority navigation When horizontal space is limited, navigation items that no longer fit are collapsed into a popover behind a "More" trigger, keeping the bar on a single line. Resize the frame to see items move in and out of the popover.
Source CodeView Fullscreen
Feature tour On first visit, a sequence of popovers guides the user through the key areas of the interface one step at a time ("Step 2 of 4", Back / Next / Skip), each anchored to the element it describes. Only a single step is open at once.
Source CodeView Fullscreen
Global settingsColor SchemeAll color tokens use the light-dark() CSS function. Set the theme via the CSS color-scheme property: light for light mode, dark for dark mode, or light dark to follow the user's system preference.LightDarkLight DarkDirectionThe 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%