Installing the design system
Consuming the design system via
The simplest way to consume the design system is with a
<link rel="stylesheet" href="https://unpkg.com/mp-design-system@latest/dist/build/scss/main.css" />
The latest version number is V.1.2.4, and is visible in the top-right of the page throughout the design system. That version may not have been tested thoroughly - on the main website we stay a few versions behind the latest, and we specify a precise version of each asset by replacing "@latest" in the URL, e.g.
<script> tag needs to be placed near the closing
</body> tag of your page; it won't run correctly if placed in the head.
Consuming the design system via NPM
If you wish to integrate the design system into your own build system, or customise the files being served, you can install the
mp-design-system NPM package.
npm install mp-design-system
package.json file, you can add an alias, allowing you to reference the system with the characters
Now, within your main SCSS file, you can pull in the full system:
Pull in specific sections of the system:
Or even pull in specific components: