1. Home ›
  2. Documentation ›
  3. Building Templates ›
  4. Global Header & Footer

Global Header & Footer

The global header includes the Brand Blue background, academic mark, and site title that consistently appear on every site. The global header must be the first visible element on the page. The only exception being the official emergency alert bar.

The following is a summary of the markup for this section. Additional information about the navigation and search sections can be found on the Navigation & Search page.

University of Notre Dame

Parent Unit Name

Site Title

<header id="header" class="site-header">
  <!-- Academic mark  -->
  <p class="mark-header"><a href="https://www.nd.edu/">University of Notre Dame</a></p>
  <div class="site-title-group">
    <p class="site-parent">Parent Unit Name</p> <!-- optional-->
    <h1 id="site-title" class="site-title"><a href="/" accesskey="1" title="Homepage shortcut key = 1">Site Title</a></h1>
    <p class="site-tagline">Tagline for Site</p> <!-- optional -->
  </div>
  <div class="nav-header">
    <nav id="nav-top" class="nav-top" role="navigation" aria-label="Primary navigation">
      <!-- Top nav...  -->
      <!-- Search form... -->
    </nav>
  </div>
  <div class="nav-mobile-util"><!-- Mobile navbar... --></div>
</header>

Header CSS Reference

CSS Class Description
.site-header Designates the header element for the page.
.mark-header Displays the academic mark. Used in conjunction with the link back to nd.edu.
.site-title-group Wraps the site title, site parent (if applicable), and site tagline (if applicable).
.site-title Name of site.
.site-parent (optional) Name of parent unit.
.site-tagline (optional) Tagline for site.
.nav-header Wraps the main navigation (if applicable) and search form used in the header.
.nav-top Used for main navigation used in the header.
.nav-mobile-util Wraps the mobile navbar used in the header.

The global footer contains both site-specific and University-specific information. Many of the elements have additional structured data properties for use with search engines and other web services. See the Structured Data page for more information.

<footer id="footer" class="site-footer" role="contentinfo">
  <!-- Site-specific Information -->
  <div class="footer-org" typeof="Organization" resource="#siteorg">
    <meta property="parentOrganization" resource="#parentorg" content="University of Notre Dame">
    <ul class="footer-breadcrumbs">
      <li><a href="https://example.nd.edu/">Parent Unit</a></li>
    </ul>
    <p><a href="/" class="site-link" property="url"><span property="name">Site Name</span></a></p>
    <div class="footer-contacts">
      <!-- Site contact information -->
      <p class="contact-info">
        <span class="address" property="address" typeof="PostalAddress">
          <span property="streetAddress">Street Address</span><br>
          <span property="addressLocality">Notre Dame</span>, <span property="addressRegion">IN</span> <span property="postalCode">46556</span> <span property="addressCountry">USA</span>
        </span>
        <!-- Phone number has tel: link -->
        <span class="footer-phone" property="telephone" content="+1 574-555-1234">Phone <a href="tel:574-555-1234">574-555-1234</a></span>
        <span class="footer-fax" property="faxNumber" content="+1 574-555-1234">Fax 574-555-1234</span>
        <!-- Email has mailto: link -->
        <span class="footer-email" property="email"><a rel="noopener" href="mailto:example@nd.edu">example@nd.edu</a></span>
      </p>
      <!-- Optional site-specific link(s) -->
      <!-- <p class="footer-org-links"><a href="#">Legal</a></p> -->
      <!-- Site social links -->
      <nav class="social" aria-label="Site Name social media navigation" vocab="">
        <ul>
          <!-- Social links have "noopener" rel attributes -->
          <!-- Each link has an aria-label to differentiate it from any university-specific social links -->
          <li><a class="soc-facebook" href="#" rel="noopener" aria-label="Site Name on Facebook"><svg class="icon" width="16" height="16" aria-hidden="true"><use xlink:href="#icon-facebook"></use></svg> Facebook</a></li>
          <!-- Other social links... -->
        </ul>
      </nav>
    </div>
    <div property="logo" typeof="ImageObject"><meta property="url" content="https://static.nd.edu/images/webclips/default/webclip-60.png"></div>
    <p class="copyright"><a href="https://www.nd.edu/copyright/">&copy; 2025</a> <a href="https://www.nd.edu">University of Notre Dame</a></p>
  </div>

  <!-- University information -->
  <div class="footer-parent" property="parentOrganization" typeof="CollegeOrUniversity" resource="#parentorg">
    <meta property="name" content="University of Notre Dame">
    <a href="https://www.nd.edu/" class="mark-footer" property="url logo" typeof="ImageObject" aria-label="University of Notre Dame">
      <img src="https://static.nd.edu/images/marks/gray/ndmark.svg" width="250" height="60" alt="University of Notre Dame" property="url">
    </a>
    <div class="footer-parent-links">
      <!-- University links -->
      <nav aria-label="Footer links navigation">
        <ul class="footer-links">
          <!-- Each link has an aria-label to differentiate it from any site-specific links -->
          <li><a href="https://search.nd.edu/" aria-label="Search Notre Dame">Search</a></li>
          <li><a href="https://mobile.nd.edu/" aria-label="Notre Dame Mobile App">Mobile App</a></li>
          <li><a href="https://news.nd.edu/" aria-label="Notre Dame News">News</a></li>
          <li><a href="https://events.nd.edu/" aria-label="Notre Dame Events">Events</a></li>
          <li><a href="https://www.nd.edu/visit/" aria-label="Visit Notre Dame">Visit</a></li>
          <li><a href="https://www.nd.edu/about/accessibility/" aria-label="Notre Dame Accessibility Information">Accessibility</a></li>
        </ul>
      </nav>
      <!-- University social -->
      <nav class="social" aria-label="Notre Dame social media navigation" vocab="">
        <!-- Social links have "noopener" rel attributes -->
        <!-- Each link also has an aria-label to differentiate it from any site-specific social links -->
        <li><a class="soc-facebook" href="https://www.facebook.com/notredame/" rel="noopener" aria-label="Notre Dame on Facebook"><svg class="icon" width="16" height="16" aria-hidden="true"><use xlink:href="#icon-facebook"></use></svg> Facebook</a></li>
        <li><a class="soc-twitter" href="https://twitter.com/NotreDame/" rel="noopener" aria-label="Notre Dame on Twitter"><svg class="icon" width="16" height="16" aria-hidden="true"><use xlink:href="#icon-twitter"></use></svg> Twitter</a></li>
        <li><a class="soc-instagram" href="https://www.instagram.com/notredame/" rel="noopener" aria-label="Notre Dame on Instagram"><svg class="icon" width="16" height="16" aria-hidden="true"><use xlink:href="#icon-instagram"></use></svg> Instagram</a></li>
        <li><a class="soc-youtube" href="https://www.youtube.com/user/NDdotEDU" rel="noopener" aria-label="Notre Dame on YouTube"><svg class="icon" width="16" height="16" aria-hidden="true"><use xlink:href="#icon-youtube"></use></svg> YouTube</a></li>
        <li><a class="soc-linkedin" href="https://www.linkedin.com/school/university-of-notre-dame/" rel="noopener" aria-label="Notre Dame on Linkedin"><svg class="icon" width="16" height="16" aria-hidden="true"><use xlink:href="#icon-linkedin"></use></svg> LinkedIn</a></li>
      </nav>
    </div>
  </div>
</footer>
CSS Class Description
.site-footer Designates the footer element for the page.
.footer-org Wraps the site-specific information in the footer.
.site-link Name and link of site.
.footer-contacts Wraps both contact and social information.
.contact-info Contains address, phone, email, and other related contact information.
.footer-org-links Used to wrap site-specific links that need to appear in the footer, such as links to legal documents.
.social Wraps list of social links.
.copyright Wraps site copyright information.
.footer-parent Wraps the university-specific information in the footer.
.mark-footer Used for displaying the academic mark in the footer.
.footer-parent-links Wraps the university-specific links and social.
.footer-links Wraps list of university-specific links.