@postnord/pn-marketweb-components

Direct script loading of PN Components

Using a open CDN for NPM packages we've created a set of scripts to load in the required files needed to show PN Web Components without having to install them in your repo.

Initial script

<script src="https://XXXXXX/umd/pn-marketweb-init.js"></script>

Injecting components directly into a page using a script tag

Querystring parameters added the the script src (with the exception of "inject" and "domlocation") will be appended to the component as attributes.

<script src="https://127.0.0.1:8080/umd/pn-marketweb-inject.js?market=se&language=en&inject=pn-marketweb-siteheader&domlocation=top"></script>

This will load in the following component in the top of the dom

Style issues

If the sizing is all wrong it's most likely due to the html tag not having right font size set to support rem (base 10px).

The components look best if you have the following css

html {
    font-size:62.5%;
}
*, *::before, *::after {
    box-sizing: border-box;
}

Workaound

There is a possible workaround where you can add the following css to get the components to look better

:root {
    font-size: 62.5%;
}