4.2 Header View in a new window
Example
Markup
{% set data = data|default({
"svgUrl":"."
})
%}
<div class="nsw-infobar">
<div class="nsw-container d-flex justify-content-end align-items-center">
<p class="rounded bg-white">
<select id="changeLanguage" class="nsw-form-select py-2" aria-describedby="changeLanguage-helper-text changeLanguage-error-text">
<option value="">English</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</p>
</div>
</div>
<header class="nsw-header">
<div class="nsw-header__container pl-md-0">
<div class="nsw-header__wrapper d-flex justify-content-between align-items-center">
<div class="nsw-header__left d-block d-md-none">
<button type="button" class="nsw-header-btn nsw-header-btn--menu js-open-navigation" aria-expanded="false" aria-controls="main-navigation">
<img src="{{data.svgUrl}}/images/menu.svg" class="nsw-icon nsw-header-btn__icon">
<span class="nsw-header-btn__sub"><span class="sr-only">Open</span> Menu</span>
</button>
</div>
<div class="d-flex justify-content-center align-items-center py-5 px-2">
<a href="" class="nsw-header__logo-link">
<img src="{{data.svgUrl}}/images/nsw_gov_logo.svg" class="nsw-header__logo">
<span class="sr-only">Asbestos NSW Logo</span>
<span class="nsw-header-button ml-3 mx-md-3">Asbestos in NSW</span>
</a>
</div>
<div class="d-flex justify-content-center align-items-center">
<button type="button" class="nsw-header-btn nsw-header-btn--search js-open-search" aria-expanded="false"
aria-controls="header-search">
<img src="{{data.svgUrl}}/images/search.svg" class="nsw-header-btn__icon">
<span class="nsw-header-btn__sub"><span class="sr-only">Show</span> Search</span>
</button>
</div>
</div>
<div class="nsw-search">
<div id="header-search" class="nsw-search__area js-search-area" hidden>
<form role="search">
<label for="nsw-search__input" class="sr-only">Search site for:</label>
<input autocomplete="off" class="nsw-search__input js-search-input" id="nsw-search__input"
name="input-autocomplete" type="text">
</form>
<span></span>
<button class="nsw-search__close-btn js-close-search" aria-expanded="true" aria-controls="header-search">
<img src="{{data.svgUrl}}/images/close.svg" class="nsw-search__close-icon">
<span class="sr-only">Close search</span>
</button>
</div>
</div>
</div>
</header>