Site Header

Site footers provide a region at the bottom of the page for relevant links and contact info related to the website or application.

Examples and Code

Select example

Open Full Example

<header class="site-header" role="banner">
  <div class="site-header__content">
    <h1 class="site-header__site-name" id="site-name">
      <span>Site Title</span>
    </h1>
  </div>
</header>

Open Full Example

<header class="site-header" role="banner">
  <div class="site-header__content">
    <a href="/" title="Oregon News home" rel="home" class="site-header__logo" id="logo">
      <img src="/logo-example.webp" alt="OregonNews logo" class="site-header__logo-image">
    </a>
    <h1 class="site-header__site-name site-header__site-name--hidden" id="site-name">
      <a href="/" title="Oregon News Home" class="site-header__site-link" rel="home"><span>Oregon News</span></a>
    </h1>
  </div>
</header>

Open Full Example

<header class="site-header" role="banner">
  <div class="site-header__content">
    <a href="https://cas.uoregon.edu" class="site-header__site-title-before-link">
      <div class="site-header__site-title-before site-header__site-subtitle" id="site-title-before">
        College of Arts and Sciences
      </div>
    </a>
    <h2 class="site-header__site-name" id="site-name">
      <a href="/" title="School of Computer and Data Sciences Home" class="site-header__site-link" rel="home">
        <span>School of Computer and Data Sciences</span>
      </a>
    </h2>
  </div>
</header>

Open Full Example

<header class="site-header" role="banner">
  <div class="site-header__content">
    <h1 class="site-header__site-name" id="site-name">
      <a href="/" title="Global Education OregonHome" class="site-header__site-link" rel="home">
        <span>Global Education Oregon</span>
      </a>
    </h1>
    <div class="site-header__site-title-after site-header__site-subtitle" id="site-title-after">
      Division of Global Engagement
    </div>
  </div>
</header>

Guidance

Usage Guidance

Link to the homepage with the site title/logo
Link to the parent or sub org if in the before/after title section

Elements

Element	Description	Usage	Required	Multiple
Title	The site title		Yes	No
Logo	The site logo	Use with a link as an alternative title display, make sure the H1 still exists and is visually hidden in this case	No	No
Before Title	Subtitle above the title	Use to link to parent department or as plaintext for a formal title “Office of the”	No	No
After Title	Subtitle below the title	Use to link to parent department or as plaintext for a formal subtitle “Office of the”	No	No