Header

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.


Center Logo

<header class="site--header site--header--common">
  <div class="container">
    <div class="d-flex justify--space-between items--center">
      <div class="site--header__logo-link-wrapper col-12 justify--center">
        <a class="site--header__logo-link p-y-16" href="#">
          <img class="site--header__logo" src="./assets/component-images/240*80px.svg" />
        </a>
      </div>
    </div>
  </div>
</header>

Left Logo

<header class="site--header site--header--common">
    <div class="container">
        <div class="d-flex justify--space-between items--center">
            <div class="site--header__logo-link-wrapper justify--center justify-lg-flex-start">
                <a class="site--header__logo-link p-y-16" href="#">
                    <img class="site--header__logo" src="./assets/component-images/240*80px.svg" />
                </a>
            </div>
        </div>
    </div>
</header>

Left and Right Logo

<header class="site--header site--header--common">
    <div class="container">
        <div class="d-flex justify--space-between items--center">
            <div class="site--header__logo-link-wrapper col-12 justify--center justify-lg-space-between">
                <a class="site--header__logo-link p-y-16" href="#">
                    <img class="site--header__logo" src="./assets/component-images/240*80px.svg" />
                </a>
                <a class="site--header__logo-link p-y-16" href="#">
                    <img class="site--header__logo" src="./assets/component-images/240*80px.svg" />
                </a>
            </div>
        </div>
    </div>
</header>

Two Logos

<header class="site--header site--header--common">
    <div class="container">
        <div class="d-flex justify--space-between items--center">
            <div class="site--header__logo-link-wrapper col-12 justify--center justify-sm-flex-start">
                <a class="site--header__logo-link p-y-16" href="#">
                    <img class="site--header__logo" src="./assets/component-images/240*80px.svg" />
                </a>
                <a class="site--header__logo-link p-y-16" href="#">
                    <img class="site--header__logo" src="./assets/component-images/240*80px.svg" />
                </a>
            </div>
        </div>
    </div>
</header>