Health Design System

Header: Simple

Header

⭐ Design System - Header

The header component uses and requires the

components to create the mobile navigation and search experience.

Javascript copies the elements from Sub nav into the main navigation and only shows them on mobile.

The search box is moved depending on the screen size.

<header class="au-header au-header--simple pillars-container" role="banner">
    <div class="container">
        <div id="pillars"></div>
        <div class="row">
            <div class="col-sm-5">
                <a href="/" title="Home" rel="home" class="au-header__logo">
                    <img src="../../images/logo.svg" alt="Australia Government Department of Health and Aged Care" class="au-header__logo-image au-responsive-media-img" width="600" height="146" />
                </a>
                <div class="au-sronly">
                    <p>Australian Government Department of Health and Aged Care</p>
                </div>
            </div>
        </div>
    </div>
</header>