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 Microsite Header
<header class="site--header 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">
<a class="site--header__logo-link" href="#">
<img class="site--header__logo" src="./assets/component-images/240*80px.svg" />
</a>
</div>
<label class="site--header__menu-toggle">
<span class="blueprint-icon icon-menu_closed hamburger-menu"></span>
</label>
<nav class="site--header__menu active">
<ul class="site--header__navigation site--header__navigation-border-bottom">
<li class="site--header__menu--item site--header__menu--action">
<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">Topics</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">
<a class="site--header__menu--link active" href="#"> Nav1 </a>
</li>
<li class="site--header__menu--item">
<a class="site--header__menu--link" href="#"> Nav2 </a>
</li>
<li class="site--header__menu--item">
<a class="site--header__menu--link" href="#"> Nav3 </a>
</li>
<li class="site--header__menu--item">
<a class="site--header__menu--link" href="#"> Nav4 </a>
</li>
</ul>
</nav>
</div>
</div>
</header>Primary Header
<header class="site--header site--header-primary-light">
<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">
<a class="site--header__logo-link" href="#">
<img class="site--header__logo" src="./assets/component-images/240*80px.svg" />
</a>
</div>
<label class="site--header__menu-toggle">
<span class="blueprint-icon icon-menu_closed hamburger-menu"></span>
</label>
<nav class="site--header__menu active">
<ul class="site--header__navigation site--header__navigation-border-bottom">
<li class="site--header__menu--item site--header__menu--action">
<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">Topics</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">
<a class="site--header__menu--link active" href="#"> Nav1 </a>
</li>
<li class="site--header__menu--item">
<a class="site--header__menu--link" href="#"> Nav2 </a>
</li>
<li class="site--header__menu--item">
<a class="site--header__menu--link" href="#"> Nav3 </a>
</li>
<li class="site--header__menu--item">
<a class="site--header__menu--link" href="#"> Nav4 </a>
</li>
</ul>
</nav>
</div>
</div>
</header>Primary Sticky Header
<header class="site--header site--header-primary-light sticky">
<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">
<a class="site--header__logo-link" href="#">
<img class="site--header__logo" src="./assets/component-images/240*80px.svg">
</a>
</div>
<label class="site--header__menu-toggle">
<span class="blueprint-icon icon-menu_closed hamburger-menu"></span>
</label>
<nav class="site--header__menu active">
<ul class="site--header__navigation site--header__navigation-border-bottom">
<li class="site--header__menu--item site--header__menu--action">
<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">Topics</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">
<a class="site--header__menu--link active" href="#">Nav1</a>
</li>
<li class="site--header__menu--item">
<a class="site--header__menu--link" href="#">Nav2</a>
</li>
<li class="site--header__menu--item">
<a class="site--header__menu--link" href="#">Nav3</a>
</li>
<li class="site--header__menu--item">
<a class="site--header__menu--link" href="#">Nav4</a>
</li>
</ul>
</nav>
</div>
</div>
</header>Secondary Header
<header class="site--header site--header-secondary-light">
<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">
<a class="site--header__logo-link" href="#">
<img class="site--header__logo" src="./assets/component-images/240*80px.svg" />
</a>
</div>
<label class="site--header__menu-toggle">
<span class="blueprint-icon icon-menu_closed hamburger-menu"></span>
</label>
<nav class="site--header__menu active">
<ul class="site--header__navigation site--header__navigation-border-bottom">
<li class="site--header__menu--item site--header__menu--action">
<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">Topics</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">
<a class="site--header__menu--link active" href="#"> Nav1 </a>
</li>
<li class="site--header__menu--item">
<a class="site--header__menu--link" href="#"> Nav2 </a>
</li>
<li class="site--header__menu--item">
<a class="site--header__menu--link" href="#"> Nav3 </a>
</li>
<li class="site--header__menu--item">
<a class="site--header__menu--link" href="#"> Nav4 </a>
</li>
</ul>
</nav>
</div>
</div>
</header>Secondary Sticky Header
<header class="site--header site--header-secondary-light sticky">
<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">
<a class="site--header__logo-link" href="#">
<img class="site--header__logo" src="./assets/component-images/240*80px.svg">
</a>
</div>
<label class="site--header__menu-toggle">
<span class="blueprint-icon icon-menu_closed hamburger-menu"></span>
</label>
<nav class="site--header__menu active">
<ul class="site--header__navigation site--header__navigation-border-bottom">
<li class="site--header__menu--item site--header__menu--action">
<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">Topics</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">
<a class="site--header__menu--link active" href="#">Nav1</a>
</li>
<li class="site--header__menu--item">
<a class="site--header__menu--link" href="#">Nav2</a>
</li>
<li class="site--header__menu--item">
<a class="site--header__menu--link" href="#">Nav3</a>
</li>
<li class="site--header__menu--item">
<a class="site--header__menu--link" href="#">Nav4</a>
</li>
</ul>
</nav>
</div>
</div>
</header>