<section class="usa-banner" aria-label="Accessible website">
  <div class="usa-accordion">

    <header class="usa-banner__header">
      <div class="usa-banner__inner">
        <div class="grid-col-auto">
          <img class="usa-banner__header-flag" src="assets/uswds-2.10.1/img/us_flag_small.png" alt="U.S. flag">
        </div>
        <div class="grid-col-fill tablet:grid-col-auto">
          <p class="usa-banner__header-text">Proudly designed with the U.S. Web Design System.</p>
          <p class="usa-banner__header-action" aria-hidden="true">Here&#39;s how you know</p>
        </div>
        <button class="usa-accordion__button usa-banner__button" aria-expanded="false" aria-controls="gov-banner">
          <span class="usa-banner__button-text">Here&#39;s how you know</span>
        </button>
      </div>
    </header>

    <div class="usa-banner__content usa-accordion__content" id="gov-banner">
      <div class="grid-row grid-gap-lg">
	<div class="usa-banner__guidance tablet:grid-col-6">
	  <img class="usa-banner__icon usa-media-block__img" src="assets/uswds-2.10.1/img/icon-dot-gov.svg" role="img" alt="" aria-hidden="true">
	  <div class="usa-media-block__body">
            <p>
              <strong>Design for democracy</strong>
              <br/>
              The <a href="https://designsystem.digital.gov/">U.S. Web Design System</a> emphasizes universal accessibility.
            </p>
	  </div>
	</div>
	<div class="usa-banner__guidance tablet:grid-col-6">
	  <img class="usa-banner__icon usa-media-block__img" src="assets/uswds-2.10.1/img/icon-https.svg" role="img" alt="" aria-hidden="true">
	  <div class="usa-media-block__body">
            <p>
              <strong>Secure .gov websites use HTTPS</strong>
	      <br/>
              This website will soon feature identical protection features!
	    </p>
	  </div>
	</div>
      </div>
    </div>

  </div>
</section>

<header class="usa-header usa-header--extended sd-header">
  <div class="usa-navbar">
    <div class="usa-logo" id="extended-logo">
      <em class="usa-logo__text"><a href="index.html" title="Home" aria-label="Home">Smart Documents</a></em>
    </div>
    <button class="usa-menu-btn">Menu</button>
  </div>

  <nav aria-label="Primary navigation" class="usa-nav">
    <div class="usa-nav__inner">

      <button class="usa-nav__close">
	<img src="assets/img/usa-icons/close.svg" role="img" alt="close">
      </button>

      <ul class="usa-nav__primary usa-accordion">

	<li class="usa-nav__primary-item">
	  <button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="extended-nav-section-two">
	    <span>Features</span>
	  </button>
	  <ul id="extended-nav-section-two" class="usa-nav__submenu">
	    <li class="usa-nav__submenu-item"><a href="#" class=""> wan</a></li>
	    <li class="usa-nav__submenu-item"><a href="#" class=""> tu</a></li>
	    <li class="usa-nav__submenu-item"><a href="#" class=""> mute</a></li>
	  </ul>
	</li>
	
	<li class="usa-nav__primary-item">
	  <a class="usa-nav__link" href="original-paper.html"><span>The original paper</span></a>
	</li>
	
	<li class="usa-nav__primary-item">
	  <a class="usa-nav__link" href="jobs.html"><span>I am...</span></a>
	</li>

	<li class="usa-nav__primary-item">
	  <a class="usa-nav__link" href="about.html"><span>About</span></a>
	</li>

      </ul>

      <div class="usa-nav__secondary">
	<ul class="usa-nav__secondary-links">
	  <li class="usa-nav__secondary-item"><a href="">Contact</a></li>
	  <li class="usa-nav__secondary-item"><a href="">Contribute</a></li>
	</ul>

	<form class="usa-search usa-search--small " role="search">
	  <label class="usa-sr-only" for="extended-search-field-small">Search small</label>
	  <input class="usa-input" id="extended-search-field-small" type="search" name="search">
	  <button class="usa-button" type="submit"><span class="usa-sr-only">Search</span></button>
	</form>
      </div>
    </div>
  </nav>
</header>