@myhealth-belgium/design-system NPM

MyHealth.belgium.be Design System

The design system components to use when developing a web component to integrate with MyHealth.belgium.be.

By default, the design system components will be available on MyHealth.belgium.be. You don't need to load or package them in your own web component.

Using the design system components

Script tag

Put a script tag similar to this <script type='module' src='https://unpkg.com/@myhealth-belgium/design-system@1.0.0/dist/mijn-gezondheid-design-system/mijn-gezondheid-design-system.esm.js'></script> in the head of your index.html
Then you can use the element anywhere in your template, JSX, html etc

Node Modules

Run npm install @myhealth-belgium/design-system --save
Put a script tag similar to this <script type='module' src='node_modules/@myhealth-belgium/design-system/dist/mijn-gezondheid-design-system/mijn-gezondheid-design-system.esm.js'></script> in the head of your index.html
Make sure you import the _colors scss file as it adds all theme colors to the app :root styles as CSS custom properties.
Then you can use the element anywhere in your template, JSX, html etc

Loading it in your app

Run npm install @myhealth-belgium/design-system --save
Add this import in the main file of your app: import '@myhealth-belgium/design-system';
Make sure you import the _colors scss/css file as it adds all theme colors to the app :root styles as CSS custom properties.
Then you can use the element anywhere in your template, JSX, html etc