@cagovweb/cal-ds-header/src/template.html

cal-ds-header top header

<header role="banner">
  <!-- Add class "theme-light" to use light header version -->
  <slot name="slot1"></slot>
  <div class="site-header">
    <slot name="slot2"></slot>
    <div class="site-header-container">
      <slot name="slot3"></slot>
      <nav class="mobile-nav-menu" role="navigation">
        <a
          id="mobile-menu-button"
          href="#"
          tabindex="0"
          role="button"
          aria-haspopup="true"
          aria-controls="mobile-menu">
          <div class="hamburger"></div>
          <span class="visually-hidden">Mobile menu</span>
        </a>
        <a
          href="#"
          tabindex="-1"
          class="main-navigation-cancel"
          role="button"
          aria-label="Close menu"></a>
        <ul role="menu" id="mobile-menu" aria-labelledby="mobile-menu-button">
          <template>
            <li role="presentation">
              <a role="menuitem" tabindex="0"></a>
            </li>
          </template>
        </ul>
      </nav>

      <a href="index.html" class="site-logo">
        <!-- add class "no-overflow" to remove image's bottom overflow-->
        <img
          src="https://cdn.cdt.ca.gov/cdt/CAWeb/site-logo-circle.svg"
          alt="Eureka Design System logo"
          class="logo-image" />

        <div class="site-branding-text">
          <span class="state">California default</span>
          <span class="department">Department Website default</span>
        </div>
      </a>
      <slot name="slot4"></slot>
      <div class="site-header-utility">
        <slot name="slot5"></slot>
        <div class="search-container-desktop">
          <slot name="slot6"></slot>
          <form autocomplete="on">
            <label class="search-toggle" for="site-search"
              ><span class="visually-hidden">Search this site</span></label
            >
            <input
              id="site-search"
              type="search"
              name="q"
              placeholder="Search..."
              tabindex="0"
              required />
            <button
              type="submit"
              class="search-submit"
              tabindex="-1"
              aria-hidden="true"></button>
            <button
              type="submit"
              class="search-submit"
              aria-label="Submit search"></button>
          </form>
          <slot name="slot7"></slot>
        </div>
        <slot name="slot8"></slot>
        <a href="#" class="login-button"
          ><span class="login-text">Login</span></a
        >
        <slot name="slot9"></slot>
        <a id="cagov-toggle" href="https://www.ca.gov/">
          <span class="visually-hidden">ca.gov link</span>
        </a>
        <slot name="slot10"></slot>
      </div>
      <slot name="slot11"></slot>
    </div>
    <slot name="slot12"></slot>
  </div>
  <div class="horizontal-rule"></div>
  <nav class="desktop-nav-menu" role="navigation">
    <ul class="desktop-nav-menu-main" role="menu" aria-label="Desktop Menu">
      <template>
        <li role="presentation">
          <a role="menuitem"></a>
        </li>
      </template>
    </ul>
    <ul class="desktop-nav-menu-utility" role="menu" aria-label="Utility Menu">
      <template>
        <li role="presentation">
          <a role="menuitem"></a>
        </li>
      </template>
    </ul>
  </nav>
  <slot name="slot13"></slot>
</header>