@myhealth-belgium/design-kit v1.1.0

MyHealth - Angular design kit

The MyHealth design kit is used for developing web components to integrate with MyHealth.belgium.be.

In this current version, the design kit only works with SCSS and Angular. The design kit is meant to be used with Angular Material and will modify the Angular Material system to fit MyHealth's style.

Installation

npm install @myhealth-belgium/design-kit @angular/material

Importing the SCSS files

In your project's main SCSS file, include MH's core like so:

@use '@myhealth-belgium/design-kit' as mh;

@include mh.core();

This will add frequently used classes to your project, as well as override Angular Material style to use MH's house style instead.

Make sure to not import Angular Material into your angular.json styles. Including the SCSS mh.core() mixin will include Angular Material with MyHealth's theming for you.

MyHealth component overrides

You can override each component with MyHealth's styling individually. Or you can also import all these components at once with this SCSS mixin:

...

@include mh.override-all-mat-components();

MyHealth components

You can use MyHealth's components individually. Or you can also import all these components at once with this SCSS mixin:

...

@include mh.use-all-components();

For a full guide on how to add these components individually, please visit our Storybook.

MyHealth variables

For more information about how to use the MH design kit, please visit our Storybook.