The HDS offers a catalogues of accessible, mobile-friendly components ready to use, promoting consistency and saving teams the effort of building everything from scratch for their web design and redesign projects.
How to use the design system
Developers can use the system in three ways:
1. Out of the box
- Simply download and include the CSS and JS files from the folder in your product.
- Browse the system to understand how to use components.
- Use the templates as a starting point.
- Copy the HTML from the components to build your product.
2. Build yourself
- Clone the HDS repository into your project via NPM, or download it.
- Compile the code into usable CSS and JS.
- Browse the system to understand how to use components.
- Use the templates as a starting point.
- Copy the HTML from the components to build your product.
3. Use the starter kit
- Familiarise yourself with the Health Design System.
- Clone the HDS Starter Kit which includes a local development environment and the HDS.
- Start protyping.
Installation
Detailed instructions are available in the Health Design System repository.
Codebases