Skip to main content

Site Header

Ready
The Site Header contains the college or unit’s identity, along with optional elements.
The Site Header is required.
Branding guidelines require each website to have Ohio State branded identification.

The Site Header is located between the OSU Navbar and site menu. A parent name or slogan is optional. Please avoid using both, if possible.

Examples#

Default#

College or unit name here
<header id="masthead" class="bux-header">
    <div class="bux-container bux-grid">
        <div class="bux-header__col bux-header__col--left bux-grid__cell bux-grid__cell--12 bux-grid__cell--8@md bux-grid__cell--9@xl">
            <div class="bux-header__site-name-container">
                <div class="bux-header__site-name">
                    <a href='#'>College or unit name here</a>
                </div>
            </div>
        </div>
    </div>
</header>

With Parent#

Parent name, used to support identification of college or unit
College or unit name here
<header id="masthead" class="bux-header">
  <div class="bux-container bux-grid">
      <div class="bux-header__col bux-header__col--left bux-grid__cell bux-grid__cell--12 bux-grid__cell--8@md bux-grid__cell--9@xl">
          <div class="bux-header__site-name-container">
              <div class="bux-header__site-name-parent">
                  Parent name, used to support identification of college or unit
              </div>
              <div class="bux-header__site-name">
                  <a href='#'>College or unit name here</a>
              </div>
          </div>
      </div>
  </div>
</header>

With Slogan#

College or unit name here
Unit or site slogan can go here
<header id="masthead" class="bux-header">
  <div class="bux-container bux-grid">
      <div class="bux-header__col bux-header__col--left bux-grid__cell bux-grid__cell--12 bux-grid__cell--8@md bux-grid__cell--9@xl">
          <div class="bux-header__site-name-container">
              <div class="bux-header__site-name">
                  <a href='#'>College or unit name here</a>
                  <div class="bux-header__site-name-slogan">
                      Unit or site slogan can go here
                  </div>
              </div>
          </div>
      </div>
  </div>
</header>

Usage#

The Header, along with the OSU Navbar and Site Navigation should be enclosed by the <header> element.

Dos#

  • Use a Site Header on every page of your Ohio State website or web application
  • Use the larger, bold text for the full college or unit name
  • Use the smaller text for a parent name used to support identification of the college or unit (appearing above the college name) or a brief slogan (appearing below the college name). Please avoid using both, if possible.

Don’ts#

  • Don't use both a parent name and slogan
  • Don’t split a college or unit name into two text treatments, such as “College of” in the smaller text and “Optometry” in the larger, bold text
  • Don’t use uppercase; use sentence case

Accessibility#

  • If your page is a single-page site, your header may include the page's <h1> with the name of your site as your top level header. For multiple-page sites the <h1> on the page should be part of the main content area (<main>) of the page and provide relevant text about the page content. In other words, the page’s <h1> should serve a similar purpose as the page’s title. For single-page sites this can be the name of the site in the header component. For multiple-page sites the <h1> should describe the page's content in the main content area.

References#