---
title: Web
date: 2026-06-04T11:04:00-04:00
author: Tierra Collins
canonical_url: "https://brand.umd.edu/applying-the-brand/web"
section: Pages
---
# Web
*Applying the Brand*
**Website Essentials**
Use these guidelines to design modern and accessible websites that adhere to UMD brand standards.
# University Header
*A screenshot of UMD's universal website header, with utility links to admissions, giving, campus news and search.*
A uniform website header exists to:
- Provide brand consistency on all UMD websites
- Comply with [accessibility policy](https://policies.umd.edu/general-administration/university-of-maryland-web-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](https://today.umd.edu/), [Campus Events Calendar](https://calendar.umd.edu/) and [Giving](https://giving.umd.edu/)
- 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.
- [Guidelines for logo usage on websites](https://brand.umd.edu/visual-identity/logos/usage#websites)
# 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.
``
**Add the header via Drupal**
For Drupal sites, especially those hosted by DIT, as well as legacy sites, use the UMD schoolwide header module with the static UMD header generator to include the header.
1.
Add the Drupal 9.x/10.x module to your project with composer require umd\_digital/umd\_schoolwide\_header, then drush en umd\_schoolwide\_header or enable via admin UI.
2.
Customize the injection script using the UMD header generator.
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 implementing the UMD Design System in your site updates and redesigns.