# Utah Header
[![See it on NPM!](https://img.shields.io/npm/v/@utahdts/utah-design-system-header.svg?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@utahdts/utah-design-system-header)
[![GitHub](https://img.shields.io/badge/GitHub-Utah_Design_System-ad360d?style=for-the-badge)](https://github.com/utahdts/utah-design-system)
[![License](https://img.shields.io/npm/l/@utahdts/utah-design-system.svg?color=blue&style=for-the-badge)](https://github.com/utahdts/utah-design-system/raw/main/LICENSE)
[![ARB Approved](https://img.shields.io/badge/Utah_ARB-Approved-2e7114?style=for-the-badge)](https://dts.utah.gov/standards/architecture-review-board)


The Utah Header is part of the Utah Design System. It provides a common experience for users of state of Utah websites and applications. This code also renders the [Utah Footer](https://designsystem.utah.gov/library/patterns/utahFooter).

## What's included

- Compiled CSS
- SASS + CSS
- Javascript

## Getting Started

- Visit the [![Getting Started](https://img.shields.io/badge/Getting%20Started-blue)](https://designsystem.utah.gov/resources/gettingStarted) page to begin using the Utah Header and Design System.

## Documentation

- [![Utah Header Options](https://img.shields.io/badge/Utah_Header_Options_Documentation-blue)](https://designsystem.utah.gov/library/utahHeader)
- [![Getting Started](https://img.shields.io/badge/Getting%20Started-blue)](https://designsystem.utah.gov/resources/gettingStarted)
- [![Design System Website](https://img.shields.io/badge/Design%20System%20Website-blue)](https://designsystem.utah.gov)

## NPM

The Utah Header and Design System Library are published to NPM here:
- [![Utah Header](https://img.shields.io/badge/NPM-Utah_Header-blue)](https://www.npmjs.com/package/%40utahdts/utah-design-system-header)

## Install


```bash
npm i @utahdts/utah-design-system-header
```

## Examples
We have several examples on how to implement the Design System Header:
- [Universal Module Definition (UMD)](https://github.com/utahdts/utah-design-system/tree/main/examples/utah-header/umd-html)
- [ES Module](https://github.com/utahdts/utah-design-system/tree/main/examples/utah-header/es-html)
- [Vite Plain JS App](https://github.com/utahdts/utah-design-system/tree/main/examples/utah-header/vite)
- [Angular App](https://github.com/utahdts/utah-design-system/tree/main/examples/utah-header/angular)
- [Vite Typed React App](https://github.com/utahdts/utah-design-system/tree/main/examples/typed/typed-utah-header)

For more information on the Utah Header, please visit the [header documentation page](https://designsystem.utah.gov/library/utahHeader) on the Utah Design System.

## Contribution
If you want to contribute or have any feedback, we'd love to hear from you ! Please [contact us](https://designsystem.utah.gov/resources/gettingStarted).

## Utah Design System Monorepo

This repo consists of the following:
- [![Utah Header (SCSS / Javascript)](https://img.shields.io/badge/GitHub-Utah_Header-blue?logo=github)](https://github.com/utahdts/utah-design-system/tree/main/%40utahdts/utah-design-system-header) ![README](https://img.shields.io/badge/README-gray)
- [![Design System Library (SCSS / React)](https://img.shields.io/badge/GitHub-Design_System_Library-blue?logo=github)](https://github.com/utahdts/utah-design-system/tree/main/%40utahdts/utah-design-system) ![README](https://img.shields.io/badge/README-gray)
- [![Examples](https://img.shields.io/badge/GitHub-Examples-blue?logo=github)](https://github.com/utahdts/utah-design-system/tree/main/examples) ![README](https://img.shields.io/badge/README-gray)
- [![Design System Website (SCSS / React)](https://img.shields.io/badge/GitHub-Design_System_Website-blue?logo=github)](https://github.com/utahdts/utah-design-system/tree/main/utah-design-system-website) ![README](https://img.shields.io/badge/README-gray)