Masthead

Example Markup

<section class="su-masthead [ modifier_class ]">
  <a href="#main-content" class="su-skiplinks ">Skip to main content</a>
  <div class="su-brand-bar ">
    <div class="su-brand-bar__container">
      <a class="su-brand-bar__logo" href="https://stanford.edu">
        Stanford University
        <span class="su-brand-bar__link--a11y">(link is external)</span>
      </a>
    </div>
  </div>
  <section>
    <div class="su-lockup su-lockup--option-d">
      <a href="https://decanter.stanford.edu">
        <div class="su-lockup__cell1">
          <div class="su-lockup__wordmark-wrapper">
            <span class="su-lockup__wordmark">Stanford</span>
          </div>
        </div>
        <div class="su-lockup__cell2">
          <span class="su-lockup__line1">Decanter</span>
          <span class="su-lockup__line3">Stanford's Official Styleguide</span>
        </div>
      </a>
    </div>
    <div class="su-site-search " role="search">
      <form action="https://www.stanford.edu/search" method="get" accept-charset="UTF-8">
        <label class="su-site-search__sr-label" for="search-field">Search this site</label>
        <input type="text" id="search-field" name="search-field" class="su-site-search__input" placeholder="Search this site" maxlength="128" />
        <button type="submit" name="search" class="su-site-search__submit su-sr-only-text">Submit Search</button>
      </form>
    </div>
    <nav class="su-main-nav no-js su-main-nav--mobile-search" aria-label="main menu">
      <button class="su-main-nav__toggle su-main-nav__toggle--right" aria-expanded="false">Menu</button>
      <ul class="su-main-nav__menu-lv1">
        <li class=" ">
          <a href="/">Home</a>
        </li>
        <li class="su-main-nav__item--parent su-main-nav__item--current">
          <a href="#" aria-expanded="false">Useful Websites</a>
          <ul class="su-main-nav__menu-lv2">
            <li class="">
              <a href="https://www.stanford.edu">Stanford</a>
            </li>
            <li class="">
              <a href="https://uit.stanford.edu/sws">Stanford Web Services</a>
            </li>
            <li class="">
              <a href="https://ucomm.stanford.edu/">University Communications</a>
            </li>
            <li class="su-main-nav__item--current">
              <a href="/section-components.html">Decanter components</a>
            </li>
          </ul>
        </li>
        <li class="su-main-nav__item--parent ">
          <a href="#" aria-expanded="false">Tools & Documentation</a>
          <ul class="su-main-nav__menu-lv2">
            <li class="">
              <a href="https://www.figma.com/" target="_blank" rel="external">Figma</a>
            </li>
            <li class="">
              <a href="https://twig.symfony.com/doc/2.x/" target="_blank" rel="external">Twig</a>
            </li>
          </ul>
        </li>
        <li class=" ">
          <a href="https://stackoverflow.com/" target="_blank" rel="external">Developer Help</a>
        </li>
        <li class="su-main-nav__item--parent ">
          <a href="#" aria-expanded="false">Other Useful Resources</a>
          <ul class="su-main-nav__menu-lv2">
            <li class="">
              <a href="https://www.stanford.edu/faculty-staff-gateway/">Faculty & Staff Gateway</a>
            </li>
            <li class="">
              <a href="https://www.stanford.edu/student-gateway/">Student Gateway</a>
            </li>
            <li class="">
              <a href="https://uit.stanford.edu/launchpad">What Happens If My Second Level Link Text is Really Really Long</a>
            </li>
            <li class="">
              <a href="https://uit.stanford.edu/launchpad">Tools Launchpad</a>
            </li>
          </ul>
        </li>
      </ul>
      <div class="su-site-search " role="search">
        <form action="" method="" accept-charset="UTF-8">
          <label class="su-site-search__sr-label" for="search-field">Search this site</label>
          <input type="text" id="search-field" name="search-field" class="su-site-search__input" placeholder="Search this site" maxlength="128" />
          <button type="submit" name="search" class="su-site-search__submit su-sr-only-text">Submit Search</button>
        </form>
      </div>
    </nav>
  </section>
</section>