# @universityofmaryland/utilityheader

> Utility Header element

Latest version **1.0.8-beta.1** (published 2024-07-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @universityofmaryland/utilityheader
pnpm add @universityofmaryland/utilityheader
yarn add @universityofmaryland/utilityheader
bun add @universityofmaryland/utilityheader
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8-beta.1 |
| Published | 2024-07-28 |
| First published | 2021-07-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 55.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | apccello, aj1559, lumeis, magnessjo, mescherumd |

## Links

- npm: https://www.npmjs.com/package/@universityofmaryland/utilityheader
- Repository: https://github.com/umd/elements-utility-header
- Homepage: https://github.com/umd/elements-utility-header#readme
- Issues: https://github.com/umd/elements-utility-header/issues
- npm.io page: https://npm.io/package/@universityofmaryland/utilityheader

## Recent versions

- 1.0.8-beta.1 (latest) — 2024-07-28
- 1.0.8-beta.0 — 2024-07-28
- 1.0.7 — 2022-07-31
- 1.0.6 — 2022-07-31
- 1.0.5 — 2022-07-31
- 1.0.4 — 2022-07-31
- 1.0.3 — 2022-07-31
- 1.0.2 — 2022-03-31
- 1.0.1 — 2022-03-31
- 1.0.0 — 2022-03-31
- 0.0.5 — 2022-03-30
- 0.0.4 — 2021-07-22
- 0.0.3 — 2021-07-22
- 0.0.2 — 2021-07-22
- 0.0.1 — 2021-07-20

## README

# <umd-utility-header> element

## Installation

```
$ yarn add @universityofmaryland/utilityheader
```

## Basic Usage

#### Import the utility header in your js if you bundle using a transpile with babel or typescript.

```js
import '@universityofmaryland/utilityheader';
```

#### HTML usage

```html
<umd-utility-header
  search
  events
  news
  schools
  admissions
  gift
  size="1024px"
  padding="20"
>
</umd-utility-header>
```

## Attribute options

1. Search - Includes the search form
2. Events - Adds a link to UMD Calendar
3. News - Adds a link to UMD Today
4. Schools - Adds a link to UMD Colleges/schools list
5. Admissions - Adds a link to Admissions overview
6. Gift - Adds a link to giving.umd.edu
7. Size - Sets maximum width of header contents (for layout consistency)
8. Padding - Sets the horizontal padding size (for layout consistency)

## More Example Usage

#### Include gift link and sets the gutters (padding) to be 20px

```html
<umd-utility-header gift padding="20"> </umd-utility-header>
```

#### Include the search form and events link. Adding search="domain" will set the search focus to current site (example on diversity.umd.edu, the search will default to diversity content)

```html
<umd-utility-header search="domain" events> </umd-utility-header>
```

## License

Distributed under the MIT license. See LICENSE for details.

---
_Source: https://npm.io/package/@universityofmaryland/utilityheader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._