Porsche Design System #
Web components , Angular components , React
components and Vue components to build clean and high-quality frontends that innately come with the latest design
definitions.
sample projects in all common frameworks.
These projects show how to install and the usage of the Porsche Design System. Furthermore, the example projects contain
examples and solutions for testing.# Node.js & NPM
Web components @porsche-design-system/components-jsAngular components @porsche-design-system/components-angularReact components @porsche-design-system/components-reactNext.js components @porsche-design-system/components-react/ssrRemix components @porsche-design-system/components-react/ssrVue components @porsche-design-system/components-vue
https://npmjs.com https://yarnpkg.com Theme
ThemeMore information 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 <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 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%
