Masthead

Standard

The Masthead is the first component on a page and includes navigation elements.

<header class="sprk-c-Masthead" role="banner">
  <div class="sprk-c-Masthead__content">
    <div class="sprk-c-Masthead__top-row">
      <div class="sprk-c-Masthead__hamburger">
        <button class="sprk-c-Hamburger" type="button" aria-expanded="false" data-sprk-mobile-nav-trigger="mobileNav">
          <span class="sprk-u-ScreenReaderText">Toggle Navigation</span>
          <svg class="sprk-c-Icon sprk-c-Icon--l sprk-c-Hamburger__icon" aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100">
            <g>
              <path class="sprk-c-Hamburger__line sprk-c-Hamburger__line--one" d="M5 13h90v14H5z" />
              <path class="sprk-c-Hamburger__line sprk-c-Hamburger__line--two" d="M5 43h90v14H5z" />
              <path class="sprk-c-Hamburger__line sprk-c-Hamburger__line--three" d="M5 73h90v14H5z" />
            </g>
          </svg>
        </button>
      </div>
      <div class="sprk-c-Masthead__logo">
        <a href="#nogo">
          <div class="drizzle-c-Logo-placeholder"></div>
          <span class="sprk-u-ScreenReaderText">Go to the home page</span>
        </a>
      </div>
      <div class="sprk-c-Masthead__secondary-nav">

        <nav role="navigation">
          <ul class="sprk-o-HorizontalList sprk-o-HorizontalList--spacing-medium">
            <li><a class="sprk-b-Link sprk-b-Link--standalone" href="#nogo">Item 1</a></li>
            <li><a class="sprk-b-Link sprk-b-Link--standalone" href="#nogo">Item 2</a></li>
            <li><a class="sprk-b-Link sprk-b-Link--standalone" href="#nogo">Item 3</a></li>
          </ul>
        </nav>

      </div>
      <div class="sprk-c-Masthead__search">
        <div class="sprk-b-InputContainer sprk-u-mbn  ">
          <label for="inline-search" class="sprk-u-ScreenReaderText">Search</label>
          <input placeholder="Search" class="sprk-b-TextInput  sprk-u-Width-100" id="inline-search" type="search" role="search" aria-describedby="inline-search--error-container">
          <div class="sprk-b-ErrorText" id="inline-search--error-container">
          </div>
        </div>

      </div>
    </div>
    <div class="sprk-c-Masthead__secondary">
      <p class="sprk-u-mbn sprk-b-TypeBodyTwo">Hello, Fellow Human</p>
      <p class="sprk-b-TypeBodyTwo">Loan #1234567890</p>
    </div>
  </div>
  <div class="sprk-c-Masthead__navigation">
    <div class="sprk-c-Masthead__wide-navigation-container">

      <nav role="navigation">
        <ul class="sprk-c-WideNavigation" data-sprk-navigation="wide">
          <li class="sprk-c-WideNavigation__item">
            <a class="sprk-c-WideNavigation__link" href="#nogo">Item 1</a>
          </li>
          <li class="sprk-c-WideNavigation__item" aria-haspopup="true" aria-expanded="false">
            <a class="sprk-c-WideNavigation__link" href="#nogo">Item 2
          <svg class="sprk-c-Icon sprk-c-WideNavigation__arrow" viewBox="0 0 100 100">
            <use xlink:href="#chevron-down" />
          </svg>
      </a>
            <ul class="sprk-c-WideNavigation sprk-c-WideNavigation--sub sprk-u-Display--none">
              <li class="sprk-c-WideNavigation__item sprk-c-WideNavigation__item--sub"><a class="sprk-c-WideNavigation__link sprk-c-WideNavigation__link--sub" href="#nogo">Item 1</a></li>
              <li class="sprk-c-WideNavigation__item sprk-c-WideNavigation__item--sub"><a class="sprk-c-WideNavigation__link sprk-c-WideNavigation__link--sub" href="#nogo">Item 2</a></li>
              <li class="sprk-c-WideNavigation__item sprk-c-WideNavigation__item--sub"><a class="sprk-c-WideNavigation__link sprk-c-WideNavigation__link--sub" href="#nogo">Item 3</a></li>
            </ul>
          </li>
          <li class="sprk-c-WideNavigation__item">
            <a class="sprk-c-WideNavigation__link" href="#nogo">Item 3</a>
          </li>
          <li class="sprk-c-WideNavigation__item" aria-haspopup="true" aria-expanded="false">
            <a class="sprk-c-WideNavigation__link" href="#nogo">Item 4
        <svg class="sprk-c-Icon sprk-c-WideNavigation__arrow" viewBox="0 0 100 100">
          <use xlink:href="#chevron-down" />
        </svg>
      </a>
            <ul class="sprk-c-WideNavigation sprk-c-WideNavigation--sub sprk-u-Display--none">
              <li class="sprk-c-WideNavigation__item sprk-c-WideNavigation__item--sub"><a class="sprk-c-WideNavigation__link sprk-c-WideNavigation__link--sub" href="#nogo">Item 1</a></li>
              <li class="sprk-c-WideNavigation__item sprk-c-WideNavigation__item--sub"><a class="sprk-c-WideNavigation__link sprk-c-WideNavigation__link--sub" href="#nogo">Item 2</a></li>
              <li class="sprk-c-WideNavigation__item sprk-c-WideNavigation__item--sub"><a class="sprk-c-WideNavigation__link sprk-c-WideNavigation__link--sub" href="#nogo">Item 3</a></li>
            </ul>
          </li>
          <li class="sprk-c-WideNavigation__item">
            <a class="sprk-c-WideNavigation__link" href="#nogo">Item 5</a>
          </li>
        </ul>
        <span class="sprk-c-Divider sprk-u-man"></span>
      </nav>

    </div>
    <div class="sprk-c-Masthead__narrow-navigation-container sprk-u-Display--none" data-sprk-mobile-nav="mobileNav">

      <nav role="navigation">
        <ul class="sprk-c-Accordion sprk-c-Accordion--navigation sprk-b-List sprk-b-List--bare">
          <li class="sprk-c-Accordion__item " data-sprk-toggle="container">
            <a aria-controls="details1" class="sprk-c-Accordion__summary " data-sprk-toggle="trigger" data-sprk-toggle-type="accordion" href="#">
        <span class="sprk-b-TypeBodyTwo sprk-c-Accordion__heading ">
          Item 1
        </span>

        <svg class="sprk-c-Icon sprk-c-Accordion__icon" data-sprk-toggle="icon" viewBox="0 0 448 512">
          <use xlink:href="#chevron-down"></use>
        </svg>
      </a>
            <ul class="sprk-b-List sprk-b-List--bare sprk-c-Accordion__details sprk-u-HideWhenJs" data-sprk-toggle="content">
              <li>
                <a class="sprk-b-Link sprk-b-Link--standalone sprk-u-pam" href="">Item 1</a>
              </li>
              <li>
                <a class="sprk-b-Link sprk-b-Link--standalone sprk-u-pam" href="">Item 2</a>
              </li>
              <li>
                <a class="sprk-b-Link sprk-b-Link--standalone sprk-u-pam" href="">Item 3</a>
              </li>
            </ul>
          </li>

          <li class="sprk-c-Accordion__item ">
            <a aria-controls="details1" class="sprk-c-Accordion__summary " href="#">
        <span class="sprk-b-TypeBodyTwo sprk-c-Accordion__heading ">
          Item 2
        </span>
      </a>
          </li>

          <li class="sprk-c-Accordion__item " data-sprk-toggle="container">
            <a aria-controls="details1" class="sprk-c-Accordion__summary " data-sprk-toggle="trigger" data-sprk-toggle-type="accordion" href="#">
        <span class="sprk-b-TypeBodyTwo sprk-c-Accordion__heading ">
          Item 3
        </span>

        <svg class="sprk-c-Icon sprk-c-Accordion__icon" data-sprk-toggle="icon" viewBox="0 0 448 512">
          <use xlink:href="#chevron-down"></use>
        </svg>
      </a>
            <ul class="sprk-b-List sprk-b-List--bare sprk-c-Accordion__details sprk-u-HideWhenJs" data-sprk-toggle="content">
              <li>
                <a class="sprk-b-Link sprk-b-Link--standalone sprk-u-pam" href="">Item 1</a>
              </li>
              <li>
                <a class="sprk-b-Link sprk-b-Link--standalone sprk-u-pam" href="">Item 2</a>
              </li>
              <li>
                <a class="sprk-b-Link sprk-b-Link--standalone sprk-u-pam" href="">Item 3</a>
              </li>
            </ul>
          </li>
        </ul>
      </nav>

    </div>
  </div>
</header>