Site Header

<header class="site-header">

    <a href="/">

        <img alt="Understanding Patient Data" class="site-header__logo" src="../../images/logo.svg">

    </a>

    <div class="site-header__navigation    drop-down" id="site-header-navigation">

        <div class="site-header__drop-down  drop-down__container">

            <nav class="header-nav">

                <ul class="header-nav__list">

                    <li class="header-nav__item">

                        <a class="header-nav__link" href="#link-to-page">About us</a>

                    </li>

                    <li class="header-nav__item">

                        <a class="header-nav__link" href="#link-to-page">What you need to know</a>

                    </li>

                    <li class="header-nav__item">

                        <a class="header-nav__link" href="#link-to-page">Supporting conversations</a>

                    </li>

                    <li class="header-nav__item">

                        <a class="header-nav__link" href="#link-to-page">Case studies</a>

                    </li>

                    <li class="header-nav__item">

                        <a class="header-nav__link" href="#link-to-page">News</a>

                    </li>

                    <li class="header-nav__item">

                        <a class="header-nav__link" href="#link-to-page">Contact</a>

                    </li>

                </ul>

            </nav>

        </div>

    </div>

    <a aria-controls="site-header-navigation" aria-expanded="false" class="site-header__button    u-display-none-from-visible-navigation" data-toggle="is-open" data-toggle-group="site-header" href="#site-header-navigation">

        <svg class="svg-icon  svg-icon--inline" role="presentation">

            <title>Navigation menu</title>

            <use xlink:href="#svg-icon-hamburger" />

        </svg>

    </a>

    <div class="site-header__search    drop-down" data-focus="#header-search" id="site-header-search">

        <div class="site-header__drop-down    drop-down__container">

            <form class="header-search">

                <label class="u-visually-hidden" for="header-search">Search the entire Understanding Patient Data site</label>

                <button class="site-header__button    header-search__button  js-header-search" type="submit">

                    <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" title="Search">

                        <title>Search</title>

                        <use class="header-search__icon  header-search__icon--mobile" xlink:href="#svg-icon-arrow" />

                        <use class="header-search__icon  header-search__icon--desktop" xlink:href="#svg-icon-search" />

                    </svg>

                </button>

                <input class="header-search__input" id="header-search" placeholder="Search..." required type="search">

            </form>

        </div>

    </div>

    <a aria-controls="site-header-search" aria-expanded="false" class="site-header__button    u-display-none-from-visible-navigation" data-toggle="is-open" data-toggle-group="site-header" href="#site-header-search">

        <svg class="svg-icon  svg-icon--inline" role="presentation">

            <title>Search</title>

            <use xlink:href="#svg-icon-search" />

        </svg>

    </a>

</header>

<div class="site-header  site-header--placeholder"></div>