Site Header
Component status:Ready
The Site Header contains the college or unit’s identity, along with optional elements.
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<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>
<header id="masthead" class="bux-header{% if background_color %} bux-header--{{ background_color }}{% endif %}">
<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">
{% if site_name_parent %}
<div class="bux-header__site-name-parent">
{{ site_name_parent }}
</div>
{% endif %}
<div class="bux-header__site-name">
{% if site_home_url %}
<a href={{ site_home_url }}>{{ site_name }}</a>
{% else %}
{{ site_name }}
{% endif %}
{% if site_name_slogan %}
<div class="bux-header__site-name-slogan">
{{ site_name_slogan }}
</div>
{% endif %}
</div>
</div>
</div>
</div>
</header>
#
With ParentParent name, used to support identification of college or unit
<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>
<header id="masthead" class="bux-header{% if background_color %} bux-header--{{ background_color }}{% endif %}">
<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">
{% if site_name_parent %}
<div class="bux-header__site-name-parent">
{{ site_name_parent }}
</div>
{% endif %}
<div class="bux-header__site-name">
{% if site_home_url %}
<a href={{ site_home_url }}>{{ site_name }}</a>
{% else %}
{{ site_name }}
{% endif %}
{% if site_name_slogan %}
<div class="bux-header__site-name-slogan">
{{ site_name_slogan }}
</div>
{% endif %}
</div>
</div>
</div>
</div>
</header>
#
With SloganUnit 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>
<header id="masthead" class="bux-header{% if background_color %} bux-header--{{ background_color }}{% endif %}">
<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">
{% if site_name_parent %}
<div class="bux-header__site-name-parent">
{{ site_name_parent }}
</div>
{% endif %}
<div class="bux-header__site-name">
{% if site_home_url %}
<a href={{ site_home_url }}>{{ site_name }}</a>
{% else %}
{{ site_name }}
{% endif %}
{% if site_name_slogan %}
<div class="bux-header__site-name-slogan">
{{ site_name_slogan }}
</div>
{% endif %}
</div>
</div>
</div>
</div>
</header>
#
UsageThe 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.