Maryland Brand

University Header Guidelines

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

University of Maryland web properties 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


  • 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.


  • 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 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.



SearchInclude a search form. Optionally set it to filter search results to only the site's subdomain.

<umd-utility-header search=”domain”></umd-utility-header>

EventsInclude a link to the campus calendar.<umd-utility-header events></umd-utility-header>
NewsInclude a link to Maryland Today.<umd-utility-header news></umd-utility-header>
SchoolsInclude a link to a list of colleges and schools.<umd-utility-header schools></umd-utility-header>
AdmissionsInclude a link to the Office of Undergraduate Admissions site.<umd-utility-header admissions></umd-utility-header>
GiftInclude a link to the university giving site, or provide your own giving link to a specific fund or page.<umd-utility-header gift=””></umd-utility-header>
SizeSet the maximum width of header content (for layout consistency).<umd-utility-header size=”1024px”></umd-utility-header>
PaddingSet the horizontal padding size (for layout consistency).<umd-utility-header padding=”40px”></umd-utility-header>

Example of the university header with all options


Desktop view of above code example:

University of Maryland web properties header

Mobile view of above code example:

University of Maryland mobile header

Install Custom Element Manually

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

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)

 <link href="/css/main.css" rel="stylesheet">
 <script src="/js/main.js"></script>
 <script type="module" src="/js/university-header.js"></script>

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.

  1. 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.
  2. 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.

UMD university header mock-up on different technology

Contact and Support

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