notifications-admin/app/templates/components/uk_components/header/template.njk

<!-- usa banner -->
<section class="usa-banner" aria-label="Official website of the United States government">
  <div class="usa-accordion">
    <header class="usa-banner__header">
      <div class="usa-banner__inner">
        <div class="grid-col-auto">
          <img aria-hidden="true" class="usa-banner__header-flag" src="/static/images/us_flag_small.png" alt="" />
        </div>
        <div class="grid-col-fill tablet:grid-col-auto" aria-hidden="true">
          <p class="usa-banner__header-text">
            An official website of the United States government
          </p>
          <p class="usa-banner__header-action">Here’s how you know</p>
        </div>
        <button type="button" class="usa-accordion__button usa-banner__button" aria-expanded="false"
          aria-controls="gov-banner-default-default">
          <span class="usa-banner__button-text">Here’s how you know</span>
        </button>
      </div>
    </header>
    <div class="usa-banner__content usa-accordion__content" id="gov-banner-default-default">
      <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="/static/images/icon-dot-gov.svg" role="img" alt=""
            aria-hidden="true" />
          <div class="usa-media-block__body">
            <p>
              <strong>Official websites use .gov</strong><br />A
              <strong>.gov</strong> website belongs to an official government
              organization in the United States.
            </p>
          </div>
        </div>
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img class="usa-banner__icon usa-media-block__img" src="/static/images/icon-https.svg" role="img" alt=""
            aria-hidden="true" />
          <div class="usa-media-block__body">
            <p>
              <strong>Secure .gov websites use HTTPS</strong><br />A
              <strong>lock</strong> (
              <span class="icon-lock"><svg xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64"
                  class="usa-banner__lock-image" role="img" aria-labelledby="banner-lock-description-default"
                  focusable="false">
                  <title id="banner-lock-title-default">Lock</title>
                  <desc id="banner-lock-description-default">Locked padlock icon</desc>
                  <path fill="#000000" fill-rule="evenodd"
                    d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z" />
                </svg> </span>) or <strong>https://</strong> means you’ve safely connected to
              the .gov website. Share sensitive information only on official,
              secure websites.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- usa header -->
<header class="usa-header usa-header--extended">
  <div class="usa-navbar">
    <div class="usa-logo display-flex flex-align-center" id="-logo">
      <div class="logo-img display-flex">
        <span class="usa-sr-only">US Notify Logo</span>
        <image src="{{ params.assetsPath | default('/static/images') }}/us-notify-color.png" alt="US Notify logo" xlink:href=""
          class="usa-flag-logo margin-right-1" width="40" height="35"></image>
      </div>
      <em class="logo-text usa-logo__text">
        <a href="/" title="US Notify">US Notify</a>
      </em>
    </div>
    <button type="button" class="usa-menu-btn">Menu</button>
  </div>
  <nav aria-label="Primary navigation" class="usa-nav">
    <div class="usa-nav__inner">
      <button type="button" class="usa-nav__close">
        <img src="/static/images/usa-icons/close.svg" role="img" alt="Close" />
      </button>
      <ul class="usa-nav__primary usa-accordion margin-right-1">
        {% for item in params.navigation %}
          {% if item.href and item.text %}
          <li class="usa-nav__primary-item{{ ' is-current' if item.active }}">
            <a class="usa-nav__link {{ ' usa-current' if item.active }}" href="{{ item.href }}" {% for attribute, value in
              item.attributes %} {{attribute}}="{{value}}" {% endfor %}>
              <span>{{ item.text }}</span>
            </a>
          </li>
          {% endif %}
        {% endfor %}
      </ul>
      <div class="usa-nav__secondary">
        <ul class="usa-nav__secondary-links">
          {% for item in params.secondaryNavigation %}
            {% if item.href and item.text %}
            <li class="usa-nav__secondary-item{{ ' is-current' if item.active }}">
              <a class="usa-nav__link {{ ' usa-current' if item.active }}" href="{{ item.href }}" {% for attribute, value
                in item.attributes %} {{attribute}}="{{value}}" {% endfor %}>
                <span>{{ item.text }}</span>
              </a>
            </li>
            {% endif %}
          {% endfor %}
          <!-- <li class="usa-nav__secondary-item">
            <a href="javascript:void(0)">
              Sign in
            </a>
          </li> -->
        </ul>
        <!-- <section aria-label="Search component">
          <form class="usa-search usa-search--small margin-bottom-2" role="search">
            <label class="usa-sr-only" for="search-field">Search</label>
            <input class="usa-input" id="search-field" type="search" name="search" />
            <button class="usa-button" type="submit">
              <img src="/static/images/usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search" />
            </button>
          </form>
        </section> -->
      </div>
    </div>
  </nav>
</header>