Skip to main content
Hennepin County Design System

Installing components library

Downloading and incorporating design system components

Download the ZIP file

  1. Go to the Hennepin County GitHub repository
  2. Navigate to the green “Code” button and select “Download ZIP” from the options.
  3. After downloading the ZIP file, extract the contents. 

Add the component files

  1. Find the “components” directory in the extracted folder. This directory stores individual components and their files (HTML, CSS, and sometimes JS).
  2. Copy the files from the directory into your project’s corresponding directories. For example, copy the “button” files to your project’s “buttons” directory.

Incorporate the Design System CSS Stylesheet

  1. The file ./CSS/index.css is a compiled CSS file that includes all the CSS for the design system. Copy ./CSS/index.css into your project, then link it in your HTML files.
  2. The index.css file is compiled from ./index.scss in the root folder. If you would like to remove any components from the stylesheet, edit what files are forwarded by ./index.scss and then recompile a new css file.
  3. Note that the Search and Modal components require their nested components (button and text input field) to be imported.

Use the components

To use a component, copy and paste the component HTML into your project, then replace any placeholder text with real content. Adjust the component’s HTML and JS as needed to fit your project needs.