Porsche Design System Search Navigate to GitHub repository of Porsche Design System Open sidebar prev nextConfigurator Examples Usage Accessibility API 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 settingsTheme
ThemeMore information Changes 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. // TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259
Light// TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259
Dark// TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259
Auto (sync with operating system)DirectionMore information Changes the direction of HTML elements, mostly used on<html>
tag to support languages which are read from right to left like e.g. Arabic. // TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259
LTR (left-to-right)// TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259
RTL (right-to-left)// TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259
AutoText ZoomMore information Changes 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%. // TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259
100%// TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259
130%// TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259
150%// TODO: get rid of ARIA sprouting and use `elementInternals` API when AXE-CORE supports it: https://github.com/dequelabs/axe-core/issues/4259
200%