Website Essentials

A uniform website header exists to:

• Provide brand consistency on all UMD websites
• Comply with accessibility policy
• Enable campus alerts, such as weather delays and closures, to be displayed — if triggered on the main UMD homepage
• Provide flexibility in adding or removing features
• Provide flexibility in linking to distinct fundraising opportunities on the UMD giving site
• Link to the UMD homepage
• Offer a slim, modern look that complements the UMD homepage’s design

Features

• Options for quick links to campus resources, including Maryland Today, Campus Events Calendar and Giving
• Search, which can be customized to a particular domain

• Responsive and accessible to all major browsers

   

Requirements

• Altering the design, color and code of the university header is prohibited, other than enabling or disabling options.
• The university header must be the top element on every page; only an accessible "skip link" may appear above it. 
• Any unit using the old UMD web wrap should consider rebuilding its site to incorporate the university header.

 

Adding the University Header

Install the UMD Design System via yarn/npm

yarn add --dev @universityofmaryland/web-components-library

or

npm install --save-dev @universityofmaryland/web-components-library

Usage in javascript:

import { Components } from '@universityofmaryland/web-components-library'; document.addEventListener('DOMContentLoaded', () => { Components.NavUtility.Load(); });

Usage in HTML

Add the following element right after the opening <body> tag.

<umd-element-navigation-utility></umd-element-navigation-utility>

Add the header via Drupal