A header is the top section of a webpage that typically contains the logo, navigation menu, search bar, and user profile options. It helps users navigate a website easily.

Insights Header Non Logged In

<header class="site--header items--center bg-light display--flex site--header--version-first">
  <div class="container">
    <div class="display--flex justify--space-between items--center">
      <div class="site--header__logo-link-wrapper position--relative">
        <a class="site--header__logo-link p-y-16" href="/">
          <img alt="logo" width="145" height="40" class="site--header__logo position--relative" src="./assets/component-images/240*80px.svg" style="color: transparent;">
        </a>
      </div>
      <div class="nav--wrapper items--center display--flex">
        <nav class="site--header__menu site--header__menu--item--horizontalm"></nav>
        <label class="site--header__menu--item position--relative">
          <button type="button" class="btn btn--mid btn--white" text="Login">Login</button>
        </label>
      </div>
    </div>
  </div>
</header>

Insights Header Logged In

<header class="site--header items--center bg-light display--flex site--header--version-first">
  <div class="container">
    <div class="display--flex justify--space-between items--center">
      <div class="site--header__logo-link-wrapper position--relative">
        <a class="site--header__logo-link p-y-16" href="/">
          <img alt="logo" width="145" height="40" class="site--header__logo position--relative" src="./assets/component-images/240*80px.svg" style="color: transparent;"></a>
        </div>
        <div class="nav--wrapper items--center display--flex">
          <nav class="site--header__menu site--header__menu--item--horizontalm"></nav>
          <label class="site--header__active-user position--relative active ">
            <span class="blueprint-icon icon-person items--center justify--center"></span>
          </label>
        </div>
      </div>
  </div>
</header>