University Header Guidelines

All official University of Maryland websites, not including student sites, must be identified with the university header.

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 compliments the UMD homepage's design

Features

Main UMD news feed, providing dynamic content
Main UMD calendar feed, providing dynamic content
Quick links to college and school pages
Quick links to undergraduate and graduate admissions pages
Link to the giving page
Search, which can be customized to a particular domain

The university header was developed to be responsive to the width of any browser; it does not require a separate version for mobile phones or tablet devices. Content can span the full 100% width or can be set to a particular width, depending on site design.

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; the only element that may appear above it is an accessible "skip link." See web accessibility guidelines for more information on content skip links.
Any unit using the old UMD web wrap should consider rebuilding its site to incorporate the university header.

Adding the Header to Your Site

Import via yarn/npm (preferred) Install manually Drupal script

Import the Custom Element via yarn/npm (preferred)

Note for Drupal users: This method is not currently supported on the Drupal template sites managed by the Division of Information Technology (DIT). A compatible Drupal module is available through DIT. The accompanying script is deprecated but still available. Learn more about the universal header Drupal script.

Installation via yarn/npm

yarn add --dev @universityofmaryland/utilityheader

npm install --save-dev @universityofmaryland/utilityheader

The source code can be viewed on the UMD Digital github.

Usage in js files

import '@universityofmaryland/utilityheader';

Usage in HTML

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

<umd-utility-header></umd-utility-header>

Options

Option	Details	Example
Search	Include a search form. Optionally set it to filter search results to only the site's subdomain.	`<umd-utility-header search=”domain”></umd-utility-header>`
Events	Include a link to the campus calendar.	`<umd-utility-header events></umd-utility-header>`
News	Include a link to Maryland Today.	`<umd-utility-header news></umd-utility-header>`
Schools	Include a link to a list of colleges and schools.	`<umd-utility-header schools></umd-utility-header>`
Admissions	Include a link to the Office of Undergraduate Admissions site.	`<umd-utility-header admissions></umd-utility-header>`
Gift	Include a link to the university giving site, or provide your own giving link to a specific fund or page.	`<umd-utility-header gift=”https://giving.umd.edu/name-of-fund”></umd-utility-header>`
Size	Set the maximum width of header content (for layout consistency).	`<umd-utility-header size=”1024px”></umd-utility-header>`
Padding	Set the horizontal padding size (for layout consistency).	`<umd-utility-header padding=”40px”></umd-utility-header>`

Example of the university header with all options

<umd-utility-header 
 search=”domain”
 events
 news
 schools
 admissions
 gift="https://giving.umd.edu/name-of-fund"
 size=”1280px”
 padding=”20px”
></umd-utility-header>

Desktop view of above code example:

Mobile view of above code example:

Install Custom Element Manually

Save the contents of the compiled header code as a .js file in your project.
Import the file into the base of your project with a script tag. Learn more about the script tag on developer.mozilla.org.
Follow the same html usage instructions as the yarn/npm instructions above.

Compiled universal header Javascript code Script tag basic usage from developer.mozilla.org

Example usage (directory structure)

Folder of web project:
| css
 | main.css
| index.html
| js
 | main.js
 | university-header.js ← header js logic can be saved here.
| media

Example usage (html)

<html>
 <head></head>
 <body>
 <umd-utility-header></umd-utility-header>
 …
 <link href="/css/main.css" rel="stylesheet">
 <script src="/js/main.js"></script>
 <script type="module" src="/js/university-header.js"></script>
 </body>
</html>

Drupal script (Deprecated)

For Drupal sites, especially those hosted by DIT, and legacy sites, use the UMD schoolwide header module with the static UMD header generator to include the header.

Add the Drupal 8.x/9.x module to your project with composer require umd_digital/umd_schoolwide_header --prefer-dist, then drush en umd_schoolwide_header or enable via admin UI.
Customize the injection script using the UMD header generator.

A note on deprecation: These Drupal modules will only receive urgent security updates and will eventually be retired for the custom element. While there is no set date for retirement, we strongly recommend using the custom element in your site updates and redesigns.

Contact and Support

Need support? Submit a project request form to open a request with the Office of Marketing and Communications.