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
- 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
Usage in HTML
Add the following header element right after the opening <body> tag.
|Search||Include a search form. Optionally set it to filter search results to only the site's subdomain.|
|Events||Include a link to the campus calendar.|
|News||Include a link to Maryland Today.|
|Schools||Include a link to a list of colleges and schools.|
|Admissions||Include a link to the Office of Undergraduate Admissions site.|
|Gift||Include a link to the university giving site, or provide your own giving link to a specific fund or page.|
|Size||Set the maximum width of header content (for layout consistency).|
|Padding||Set the horizontal padding size (for layout consistency).|
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.
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_headeror 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.