Porsche Design SystemSearchNavigate to GitHub repository of Porsche Design SystemOpen sidebar
ConfiguratorExamplesUsageAccessibilityAPI
Display Usage p-display is used to highlight and specify heading styling and hierarchy. Do's: Use p-display for standout moments like hero intros, emotional statements, or key statistics. Choose from display-small, display-medium, or display-large depending on the visual weight required. Center-align p-display styles for marketing, landing, or intro sections to enhance visual impact. Ensure generous spacing around p-display elements to give them room to breathe. Don't: Don’t use p-display styles for standard section headings or body text—use p-heading or p-text instead. Don’t mix multiple p-display sizes on the same screen unless clearly structured (e.g. in a visual hierarchy).
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%