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.
Default Header
<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 class="site--header__logo" src="./assets/component-images/240*80px.svg" />
</a>
</div>
<nav class="site--header__menu">
<ul class="site--header__navigation">
<li class="site--header__menu--item items--center">
<a class="site--header__menu--link items--center position--relative para--three" href="#">
Nav1
</a>
</li>
<li class="site--header__menu--item items--center">
<a class="site--header__menu--link items--center position--relative para--three" href="#">
Nav2
</a>
</li>
<li class="site--header__menu--item items--center">
<a class="site--header__menu--link items--center position--relative para--three" href="#">
Nav3
</a>
</li>
<li class="site--header__menu--item items--center">
<button type="button" class="btn btn--mid btn--white" aria-label="Login">
Button
</button>
</li>
</ul>
</nav>
</div>
</div>
</header>Header with Two Logos
Lorem Ipsum is simply dummy text
<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 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>
<span class="site--header__supporting-txt position--absolute">
Lorem Ipsum is simply dummy text
</span>
</div>
<nav class="site--header__menu">
<ul class="site--header__navigation">
<li class="site--header__menu--item items--center">
<a class="site--header__menu--link items--center position--relative para--three" href="#">
Nav1
</a>
</li>
<li class="site--header__menu--item items--center">
<a class="site--header__menu--link items--center position--relative para--three" href="#">
Nav2
</a>
</li>
<li class="site--header__menu--item items--center">
<a class="site--header__menu--link items--center position--relative para--three" href="#">
Nav3
</a>
</li>
<li class="site--header__menu--item items--center">
<button type="button" class="btn btn--mid btn--white" aria-label="Login">
Button
</button>
</li>
</ul>
</nav>
</div>
</div>
</header>Header With Search
<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="m-search-wrapper">
<input type="checkbox" id="m-search-wrapper--input" name="menu" class="hidden-checkbox" />
<label class="m-search-wrapper--icon" for="m-search-wrapper--input">
<span class="blueprint-icon icon-search search-icon"></span>
</label>
<form role="search">
<div class="form--search--input-parent position--relative">
<input type="text" placeholder="Search" class="form--text--input" />
<span class="blueprint-icon icon-search search-icon position--absolute"></span>
</div>
</form>
</div>
<div class="site--header__logo-link-wrapper position--relative">
<a class="site--header__logo-link p-y-16" href="#">
<img class="site--header__logo" src="./assets/component-images/240*80px.svg" />
</a>
</div>
<label class="site--header__menu-toggle position--relative">
<span class="blueprint-icon icon-menu_closed hamburger-menu"></span>
</label>
<nav class="site--header__menu">
<ul class="site--header__navigation">
<li class="site--header__menu--item site--header__menu--action items--center">
<label class="site--header__left-arrow-parent">
<span class="blueprint-icon icon-chevron_left hamburger-menu__left-arrow"></span>
</label>
<label class="site--header__sub-menu-heading para--two">Nav 1</label>
<label class="site--header__close-arrow-parent">
<span class="blueprint-icon icon-bp_1_close hamburger-menu__close-arrow"></span>
</label>
</li>
<li class="site--header__menu--item items--center">
<a class="site--header__menu--link items--center position--relative para--three" href="#">
Nav 2
</a>
</li>
<li class="site--header__menu--item items--center position--relative">
<a class="site--header__menu--link items--center position--relative para--three" href="#">
<span>Nav 3</span>
<span class="site--header__expand-icon position--relative"></span>
</a>
<ul class="site--header__sub-menu bg-light">
<li class="site--header__menu--item items--center position--relative">
<a href="#" class="site--header__menu--link items--center position--relative para--three">
Nav 4
</a>
</li>
<li class="site--header__menu--item items--center position--relative">
<a href="#" class="site--header__menu--link items--center position--relative para--three">
Nav 5
</a>
</li>
<li class="site--header__menu--item items--center position--relative">
<a href="#" class="site--header__menu--link items--center position--relative para--three">
Nav 6
</a>
</li>
<li class="site--header__menu--item items--center position--relative">
<a href="#" class="site--header__menu--link items--center position--relative para--three">
Nav 7
</a>
</li>
<li class="site--header__menu--item items--center position--relative">
<a href="#" class="site--header__menu--link items--center position--relative para--three">
Nav 8
</a>
</li>
<li class="site--header__menu--item items--center position--relative">
<a href="#" class="site--header__menu--link items--center position--relative para--three">
Nav 9
</a>
</li>
<li class="site--header__menu--item items--center position--relative">
<a href="#" class="site--header__menu--link items--center position--relative para--three">
Nav 10
</a>
</li>
<li class="site--header__menu--item items--center position--relative">
<a href="#" class="site--header__menu--link items--center position--relative para--three">
Nav 11
</a>
</li>
<li class="site--header__menu--item items--center position--relative site--header__view--all">
<a href="#" class="site--header__menu--link items--center position--relative para--three">
Nav 12
</a>
</li>
</ul>
</li>
<li class="site--header__menu--item items--center">
<a class="site--header__menu--link items--center position--relative para--three" href="#">
Nav 13
</a>
</li>
<li class="site--header__menu--item items--center">
<a class="site--header__menu--link items--center position--relative para--three" href="#">
Nav 14
</a>
</li>
<li class="site--header__menu--item items--center">
<a class="site--header__menu--link items--center position--relative para--three" href="#">
Nav 15
</a>
</li>
<li class="site--header__menu--item items--center site--header__menu--search-parent">
<form role="search">
<div class="form--search--input-parent position--relative">
<input type="text" placeholder="Search" class="form--text--input" />
<span class="blueprint-icon icon-search search-icon position--absolute"></span>
</div>
</form>
</li>
<li class="site--header__menu--item items--center">
<button type="button" class="btn btn--mid btn--white" aria-label="Button">
Button
</button>
</li>
</ul>
</nav>
</div>
</div>
</header>