Porsche Design System
You are currently viewing an earlier release of the Porsche Design System.Switch to the latest Porsche Design System documentation.
SearchNavigate to GitHub repository of Porsche Design SystemOpen sidebar
Loader Script Table of Contents Function name: getLoaderScript() When using porsche-design-system/components-{angular|react} our core loader gets bundled into your application. This impacts the loading behavior of Porsche Design System components because the code gets executed later, once the framework bootstraps. To achieve this bootstrapping earlier we provide a partial in all @porsche-design-system/components-{js|angular|react|vue} packages which needs to be injected into the <body> of your index.html. An in-depth optimization guide can be found at Vanilla Js Optimization. Supported options OptionDescriptionTypeDefaultprefixPrefix will be added to the component names.string | string[]undefinedformatDefines the output format of the partial. By default it returns a html string. For jsx it returns a jsx element. For sha256 it returns a SHA-256 hash of the innerHTML to use in a Content Security Policy (CSP).'html' | 'jsx' | 'sha256''html' When using jsx in the format option, it is necessary to have react/jsx-runtime as a dependency in the project included. Examples Project integration differs based on the project setup. The following showcases the most common ways. 
<!-- index.html -->
<body>
  <!--PLACEHOLDER_LOADER_SCRIPT-->
</body>

<!-- package.json (tested on macOS, the script may need to be adjusted depending on the operating system used) -->
<!-- make sure to adjust the path to the index.html file -->
"scripts": {
  "prestart": "yarn replace",
  "replace": "placeholder='<!--PLACEHOLDER_LOADER_SCRIPT-->' && partial=$placeholder$(node -e 'console.log(require(\"@porsche-design-system/components-js/partials\").getLoaderScript())') && regex=$placeholder'.*' && sed -i '' -E -e \"s^$regex^$partial^\" index.html"
  <!-- Alternative: With custom prefix -->
  "replace": "placeholder='<!--PLACEHOLDER_LOADER_SCRIPT-->' && partial=$placeholder$(node -e 'console.log(require(\"@porsche-design-system/components-js/partials\").getLoaderScript({ prefix: \"custom-prefix\" }))') && regex=$placeholder'.*' && sed -i '' -E -e \"s^$regex^$partial^\" index.html"
  <!-- Alternative: With multiple custom prefixes -->
  "replace": "placeholder='<!--PLACEHOLDER_LOADER_SCRIPT-->' && partial=$placeholder$(node -e 'console.log(require(\"@porsche-design-system/components-js/partials\").getLoaderScript({ prefix: [\"\", \"custom-prefix\", \"another-prefix\"] }))') && regex=$placeholder'.*' && sed -i '' -E -e \"s^$regex^$partial^\" index.html"
}
OutputThe result of this partial looks like this:
<script data-pds-loader-script>
var porscheDesignSystem;(()=>
{"use strict";var e={d:(t,n)=>
{for(var o in n)e.o(n,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:n[o]})},o:(e,t)=>
Object.prototype.hasOwnProperty.call(e,t),r:e=>
{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{load:()=>
r});const n="porscheDesignSystem";function o(){return document[n]||(document[n]={}),document[n]}function s({script:e,version:t,prefix:s}){const r=function(e){const t=o(),{[e]:n}=t;if(!n){let n=()=>
{};const o=new Promise((e=>
n=e));t[e]={isInjected:!1,isReady:()=>
o,readyResolve:n,prefixes:[],registerCustomElements:null}}return t[e]}(t),{isInjected:c,prefixes:i=[],registerCustomElements:d}=r,[u]=Object.entries(o()).filter((([e,n])=>
e!==t&&"object"==typeof n&&n.prefixes.includes(s)));if(u)throw new Error(`[Porsche Design System v${t}] prefix '${s}' is already registered with version '${u[0]}' of the Porsche Design System. Please use a different one.\nTake a look at document.${n} for more details.`);c||(function(e){const t=document.createElement("script");t.src=e,t.setAttribute("crossorigin",""),document.body.appendChild(t)}(e),r.isInjected=!0),i.includes(s)||(i.push(s),d&&d(s))}const r=(e={})=>
{const t="PORSCHE_DESIGN_SYSTEM_CDN";window[t]=e.cdn||window[t]||(window.location.origin.match(/\.cn$/)?"cn":"auto");const n="porscheDesignSystem";document[n]||(document[n]={}),document[n].cdn={url:"https://cdn.ui.porsche."+("cn"===window[t]?"cn":"com"),prefixes:[]},s({version:"4.0.0-rc.0",script:document[n].cdn.url+"/porsche-design-system/components/porsche-design-system.v4.0.0-rc.0.b93c29b7680ac7696e04.js",prefix:e.prefix||""})};porscheDesignSystem=t})();porscheDesignSystem.load()
</script>

// Alternative: With custom prefix
<script data-pds-loader-script>
var porscheDesignSystem;(()=>
{"use strict";var e={d:(t,n)=>
{for(var o in n)e.o(n,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:n[o]})},o:(e,t)=>
Object.prototype.hasOwnProperty.call(e,t),r:e=>
{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{load:()=>
r});const n="porscheDesignSystem";function o(){return document[n]||(document[n]={}),document[n]}function s({script:e,version:t,prefix:s}){const r=function(e){const t=o(),{[e]:n}=t;if(!n){let n=()=>
{};const o=new Promise((e=>
n=e));t[e]={isInjected:!1,isReady:()=>
o,readyResolve:n,prefixes:[],registerCustomElements:null}}return t[e]}(t),{isInjected:c,prefixes:i=[],registerCustomElements:d}=r,[u]=Object.entries(o()).filter((([e,n])=>
e!==t&&"object"==typeof n&&n.prefixes.includes(s)));if(u)throw new Error(`[Porsche Design System v${t}] prefix '${s}' is already registered with version '${u[0]}' of the Porsche Design System. Please use a different one.\nTake a look at document.${n} for more details.`);c||(function(e){const t=document.createElement("script");t.src=e,t.setAttribute("crossorigin",""),document.body.appendChild(t)}(e),r.isInjected=!0),i.includes(s)||(i.push(s),d&&d(s))}const r=(e={})=>
{const t="PORSCHE_DESIGN_SYSTEM_CDN";window[t]=e.cdn||window[t]||(window.location.origin.match(/\.cn$/)?"cn":"auto");const n="porscheDesignSystem";document[n]||(document[n]={}),document[n].cdn={url:"https://cdn.ui.porsche."+("cn"===window[t]?"cn":"com"),prefixes:[]},s({version:"4.0.0-rc.0",script:document[n].cdn.url+"/porsche-design-system/components/porsche-design-system.v4.0.0-rc.0.b93c29b7680ac7696e04.js",prefix:e.prefix||""})};porscheDesignSystem=t})();porscheDesignSystem.load({prefix:'custom-prefix'})
</script>

// Alternative: With multiple custom prefixes
<script data-pds-loader-script>
var porscheDesignSystem;(()=>
{"use strict";var e={d:(t,n)=>
{for(var o in n)e.o(n,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:n[o]})},o:(e,t)=>
Object.prototype.hasOwnProperty.call(e,t),r:e=>
{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{load:()=>
r});const n="porscheDesignSystem";function o(){return document[n]||(document[n]={}),document[n]}function s({script:e,version:t,prefix:s}){const r=function(e){const t=o(),{[e]:n}=t;if(!n){let n=()=>
{};const o=new Promise((e=>
n=e));t[e]={isInjected:!1,isReady:()=>
o,readyResolve:n,prefixes:[],registerCustomElements:null}}return t[e]}(t),{isInjected:c,prefixes:i=[],registerCustomElements:d}=r,[u]=Object.entries(o()).filter((([e,n])=>
e!==t&&"object"==typeof n&&n.prefixes.includes(s)));if(u)throw new Error(`[Porsche Design System v${t}] prefix '${s}' is already registered with version '${u[0]}' of the Porsche Design System. Please use a different one.\nTake a look at document.${n} for more details.`);c||(function(e){const t=document.createElement("script");t.src=e,t.setAttribute("crossorigin",""),document.body.appendChild(t)}(e),r.isInjected=!0),i.includes(s)||(i.push(s),d&&d(s))}const r=(e={})=>
{const t="PORSCHE_DESIGN_SYSTEM_CDN";window[t]=e.cdn||window[t]||(window.location.origin.match(/\.cn$/)?"cn":"auto");const n="porscheDesignSystem";document[n]||(document[n]={}),document[n].cdn={url:"https://cdn.ui.porsche."+("cn"===window[t]?"cn":"com"),prefixes:[]},s({version:"4.0.0-rc.0",script:document[n].cdn.url+"/porsche-design-system/components/porsche-design-system.v4.0.0-rc.0.b93c29b7680ac7696e04.js",prefix:e.prefix||""})};porscheDesignSystem=t})();porscheDesignSystem.load({prefix:''});porscheDesignSystem.load({prefix:'custom-prefix'});porscheDesignSystem.load({prefix:'another-prefix'})
</script>
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%