Porsche Design System Search Navigate to GitHub repository of Porsche Design System Open sidebar prev nextConfigurator Examples Usage Accessibility API Wordmark
Usage#
The following segment provides instructions for designers and developers regarding the appropriate utilization of this
component in various situations.
Do
Use the p-wordmark
as the main brand identifier.
Use the p-wordmark
only in dedicated situations, like global navigation.
Position the p-wordmark
centered whenever possible.
Use the p-crest
only as an additional small brand identifier (e.g., within contact cards).
Switch from the p-wordmark
to the p-crest
on small viewports below 480px (automatically implemented in global
navigation and footer).
Don't
Use the p-crest
as the primary brand identifier by default.
Display the p-wordmark
too often (usually once is enough).
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%