Missouri State University Pattern Library

Interior masthead

Missouri State University has three campus homepages:

MissouriState.edu

WP.MissouriState.edu

Foundation.MissouriState.edu

There are three potential parts of a masthead (in order).

  1. Campus (icon)

  2. Section parent (site)

  3. Section (subsite)

There are five different masthead patterns:

  1. Campus masthead
  2. Homepage masthead
  3. Homepage masthead with parent
  4. Interior masthead
  5. Interior masthead with parent

H1 Tag

The h1 tag, which tells search engines and users what the content of the page is about, is located according to the masthead type.

  1. Campus masthead - h1 surrounds the top icon representing the campus.
  2. Homepage masthead - h1 surrounds the section (subsite) title.
  3. Homepage masthead with parent - h1 surrounds the section (subsite) title.
  4. Interior masthead - h1 surrounds the page title.
  5. Interior masthead with parent - h1 surrounds the page title.
<header id="Masthead" data-msutemplate="masthead">
    <div id="MastheadInner">
        <div class="Logo">
            <a href="">
                <img src="../../images/foundation-logo.svg" alt="Missouri State Foundation" height="88" width="" />
            </a>
        </div>
        <div class="utility">
            <div class="skip-nav">
                <a href="#PageInnerWrapper" class="item hidden">Skip to content</a>
                <a href="#MainNav" class="item hidden">Skip to navigation</a>
            </div>
            <nav class='Masthead Navbar' aria-label='Top menu'>
                <div id='MastheadControls'>
                    <div class='NavMenu'>
                        <a href='https://securelb.imodules.com/s/1691/foundation/interior.aspx?sid&#x3D;1691&amp;gid&#x3D;2&amp;pgid&#x3D;1157&amp;cid&#x3D;2189' aria-label='Give' target='_self'>Give</a>
                    </div>
                    <div class='SearchMenuDropDown'>
                        <input type='checkbox' id='searchmenu-toggle' value='' name='searchmenu-checkbox' />
                        <label for='searchmenu-toggle' data-toggle='dropdown' class='magnifyicon'>
                            <img src='../../images/sgf-logo.svg' alt='Magnify glass' />
                        </label>
                        <div class='SearchContainer' aria-label='Search'>
                            <form action='' itemprop='potentialAction' itemscope itemtype='https://schema.org/SearchAction' method='get'>
                                <meta content='https://search.missouristate.edu/?q={q}' itemprop='target' />
                                <label for='KeywordsDropDown'>
                                    <img src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='Enter keyword:' width='1' height='1' />Search
                                </label>
                                <input id='KeywordsDropDown' itemprop='query-input' name='q' placeholder='Search' type='search' />
                                <input alt='Go' cheight='1' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' type='image' width='1' />
                            </form>
                        </div>
                    </div>
                    <div class='Search'>
                        <form action='' method='get' itemprop='potentialAction' itemscope itemtype='https://schema.org/SearchAction' method='get'>
                            <meta content='https://search.missouristate.edu/?q={q}' itemprop='target' />
                            <label for='Keywords'>
                                <img src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' alt='Enter keyword:' width='1' height='1' />Search
                            </label>
                            <input id='Keywords' itemprop='query-input' name='q' placeholder='Search' type='search' />
                            <input alt='Go' height='1' src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' type='image' width='1' />
                        </form>
                    </div>
                </div>
            </nav>
        </div>
        <!-- hamburger -->
        <input type="checkbox" id="menu-toggle" />
        <label class="menu-button-container" for="menu-toggle">
            <div class="menu-button"></div>
        </label>
        <!-- end of hamburger code -->
    </div>
    <!-- this is the new nav bar -->
    <div class="nav-bar"></div>
    <nav class="nav-area">
        <ul class="menu">
            <li class="drop-down">
                <input type="checkbox" id="subnav-dropdown-1" value="" name="subnav-checkbox-1">
                <label for="subnav-dropdown-1" data-toggle="dropdown">
                    <a href="https://www.missouristatefoundation.org/WaysToGive/" aria-label="Support MSU" target="_top">Support MSU</a>
                </label>
                <ul class="sub-menu">
                    <li>
                        <a href="https://securelb.imodules.com/s/1691/foundation/interior.aspx" aria-label="Make a Gift">Make a Gift</a>
                    </li>
                    <li>
                        <a href="https://www.missouristatefoundation.org/where-to-give.htm" aria-label="Your Passion">Your Passion</a>
                    </li>
                    <li>
                        <a href="https://www.missouristatefoundation.org/MakeAnImpact/" aria-label="Your Impact">Your Impact</a>
                    </li>
                    <li>
                        <a href="https://msu.giftlegacy.com/" aria-label="Planned Giving">Planned Giving</a>
                    </li>
                </ul>
            </li>
            <li class="drop-down">
                <input type="checkbox" id="subnav-dropdown-2" value="" name="subnav-checkbox-2">
                <label for="subnav-dropdown-2" data-toggle="dropdown">
                    <a href="https://www.missouristatefoundation.org/About/" aria-label="About Us" target="_top">About Us</a>
                </label>
                <ul class="sub-menu">
                    <li>
                        <a href="https://www.missouristatefoundation.org/About/mission-and-vision.htm" aria-label="Mission">Mission</a>
                    </li>
                    <li>
                        <a href="https://www.missouristatefoundation.org/About/investments.htm" aria-label="Investments">Investments</a>
                    </li>
                    <li>
                        <a href="https://www.missouristatefoundation.org/About/financial-position.htm" aria-label="Financial Position">Financial Position</a>
                    </li>
                    <li>
                        <a href="https://www.missouristatefoundation.org/About/board-of-trustees.htm" aria-label="Board of Trustees">Board of Trustees</a>
                    </li>
                    <li>
                        <a href="https://www.missouristatefoundation.org/About/contact.htm" aria-label="Contact">Contact</a>
                    </li>
                </ul>
            </li>
            <li class="drop-down">
                <input type="checkbox" id="subnav-dropdown-3" value="" name="subnav-checkbox-3">
                <label for="subnav-dropdown-3" data-toggle="dropdown">
                    <a href="https://www.missouristatefoundation.org/WaysToGive/" aria-label="Donor Resources" target="_top">Donor Resources</a>
                </label>
                <ul class="sub-menu">
                    <li>
                        <a href="https://www.missouristatefoundation.org/foundation-relations.htm" aria-label="Foundation Relations">Foundation Relations</a>
                    </li>
                    <li>
                        <a href="https://www.missouristatefoundation.org/WaysToGive/default.htm" aria-label="Ways to Give">Ways to Give</a>
                    </li>
                    <li>
                        <a href="https://www.missouristatefoundation.org/MakeAnImpact/annual-giving.htm" aria-label="Annual Giving">Annual Giving</a>
                    </li>
                    <li>
                        <a href="https://www.missouristatefoundation.org/WaysToGive/matching-gifts.htm" aria-label="Matching Gift Lookup">Matching Gift Lookup</a>
                    </li>
                    <li>
                        <a href="https://alumni.missouristate.edu/address-update.htm" aria-label="Update Your Info">Update Your Info</a>
                    </li>
                </ul>
            </li>
            <li class="drop-down">
                <input type="checkbox" id="subnav-dropdown-4" value="" name="subnav-checkbox-4">
                <label for="subnav-dropdown-4" data-toggle="dropdown">
                    <a href="https://www.missouristatefoundation.org/where-to-give.htm" aria-label="Giving Opportunities" target="_top">Giving Opportunities</a>
                </label>
                <ul class="sub-menu">
                    <li>
                        <a href="https://www.missouristatefoundation.org/colleges-and-departments.htm" aria-label="Colleges and Programs">Colleges and Programs</a>
                    </li>
                    <li>
                        <a href="https://alumni.missouristate.edu/s/1691/foundation/interior.aspx?sid&#x3D;1691&amp;gid&#x3D;2&amp;pgid&#x3D;1340&amp;content_id&#x3D;899" aria-label="Scholarships">Scholarships</a>
                    </li>
                    <li>
                        <a href="https://www.missouristatefoundation.org/MakeAnImpact/endowments.htm" aria-label="Endowments">Endowments</a>
                    </li>
                    <li>
                        <a href="https://www.givecampus.com/schools/MissouriStateUniversity" aria-label="MSU Crowdfunding">MSU Crowdfunding</a>
                    </li>
                    <li>
                        <a href="https://alumni.missouristate.edu/licenseplates.htm" aria-label="MSU License Plates">MSU License Plates</a>
                    </li>
                </ul>
            </li>
            <li class="drop-down">
                <input type="checkbox" id="subnav-dropdown-5" value="" name="subnav-checkbox-5">
                <label for="subnav-dropdown-5" data-toggle="dropdown">
                    <a href="https://www.missouristatefoundation.org/Donors/" aria-label="Donor Recognition" target="_top">Donor Recognition</a>
                </label>
                <ul class="sub-menu">
                    <li>
                        <a href="https://www.missouristatefoundation.org/Donors/the-founders-club.htm" aria-label="The Founders Club">The Founders Club</a>
                    </li>
                    <li>
                        <a href="https://www.missouristatefoundation.org/Donors/BearsFund/default.htm" aria-label="The Bears Fund">The Bears Fund</a>
                    </li>
                    <li>
                        <a href="https://www.missouristatefoundation.org/Donors/the-1905-society.htm" aria-label="The 1905 Society">The 1905 Society</a>
                    </li>
                    <li>
                        <a href="https://www.missouristatefoundation.org/Donors/the-performance-society.htm" aria-label="The Performance Society">The Performance Society</a>
                    </li>
                </ul>
            </li>
            <li class="drop-down">
                <input type="checkbox" id="subnav-dropdown-6" value="" name="subnav-checkbox-6">
                <label for="subnav-dropdown-6" data-toggle="dropdown">
                    <a href="https://maroonation.missouristate.edu/s/1691/foundation/interior.aspx?sid&#x3D;1691&amp;gid&#x3D;2&amp;pgid&#x3D;494" aria-label="Events" target="_top">Events</a>
                </label>
                <ul class="sub-menu">
                    <li>
                        <a href="https://maroonation.missouristate.edu/s/1691/foundation/interior.aspx?sid&#x3D;1691&amp;gid&#x3D;2&amp;pgid&#x3D;494" aria-label="Foundation Events">Foundation Events</a>
                    </li>
                    <li>
                        <a href="https://maroonation.missouristate.edu/s/1691/foundation/interior.aspx?sid&#x3D;1691&amp;gid&#x3D;2&amp;pgid&#x3D;2810&amp;content_id&#x3D;2547" aria-label="Public Affairs Reception">Public Affairs Reception</a>
                    </li>
                </ul>
            </li>
            <li class="drop-down">
                <input type="checkbox" id="subnav-dropdown-7" value="" name="subnav-checkbox-7">
                <label for="subnav-dropdown-7" data-toggle="dropdown">
                    <a href="https://msu.giftlegacy.com/" aria-label="Gift Legacy" target="_top">Gift Legacy</a>
                </label>
                <ul class="sub-menu">
                    <li>
                        <a href="https://msu.giftlegacy.com/?VID&#x3D;-1&amp;DID&#x3D;42&amp;pageID&#x3D;19" aria-label="Request Guide to Wills and Estates">Request Guide to Wills and Estates</a>
                    </li>
                    <li>
                        <a href="https://msu.giftlegacy.com/?pageID&#x3D;10" aria-label="Ways to Give">Ways to Give</a>
                    </li>
                    <li>
                        <a href="https://msu.giftlegacy.com/?pageID&#x3D;5" aria-label="Gift Options">Gift Options</a>
                    </li>
                    <li>
                        <a href="https://msu.giftlegacy.com/?pageID&#x3D;2" aria-label="Donor Stories">Donor Stories</a>
                    </li>
                    <li>
                        <a href="https://msu.giftlegacy.com/?pageID&#x3D;29" aria-label="Giving News">Giving News</a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</header>
 
<header id="Masthead" data-msutemplate="masthead">
  <div id="MastheadInner">
    <div class="Logo">
      <a href="{{@root.campus.url}}">
        <img src="{{path image.src}}" alt="{{image.alt}}" height="{{image.height}}" width="{{image.width}}" />
      </a>
    </div>
    <div class="utility">
      <div class="skip-nav">
        <a href="#PageInnerWrapper" class="item hidden">Skip to content</a>
        <a href="#MainNav" class="item hidden">Skip to navigation</a>
      </div>
      {{> @navbar-masthead navbarMasthead}}
    </div>  
    <!-- hamburger -->
    <input type="checkbox" id="menu-toggle"/> 
    <label class="menu-button-container" for="menu-toggle">
      <div class="menu-button"></div>
    </label>
    <!-- end of hamburger code -->
  </div> 
    {{#if alert}}
      {{> @alert alert}}
    {{/if}}
    <!-- this is the new nav bar -->
    {{> @nav-primary primaryNav}}
</header>
 
{
  "image": {
    "src": "/images/foundation-logo.svg",
    "alt": "Missouri State Foundation",
    "height": 88,
    "width": null,
    "url": "https://www.missouristatefoundation.org/"
  },
  "utility": {
    "display": false,
    "logIn": {
      "display": false
    },
    "siteIndex": {
      "display": false
    },
    "search": {
      "display": true,
      "url": "https://search.missouristate.edu/",
      "filter": null
    }
  },
  "alert": null,
  "site": {
    "site": {
      "isHomepage": false,
      "parentSite": {
        "name": "",
        "url": ""
      },
      "subSite": {
        "name": "Section (subsite)",
        "url": "#"
      }
    }
  }
}