Header

A JSON version of the header is included in snippets/layout.json

Content with a data-ucas-content attribute would need to be replaced with markup from the UCAS Content API.
Content with a data-ucas-content-optional attribute can be omitted.

<!-- START header_complete component -->
  <!-- START header upper component -->
<section class="section section--upper-header" id="section--upper-header">
  <div class="grid-container grid-12">
    <div class="grid__column-12">
      <!-- START global menu component -->
<button class="global-menu__toggle button--clear icon-inline--left icon--menu-light">Menu</button>
<nav class="global-menu__wrapper">
  <ul class="global-menu--primary">
    <li><a id="global-menu--ucas" href="https://www.ucas.com">UCAS</a></li>
    <li><a id="global-menu--advisers" href="https://www.ucas.com/advisers">Advisers</a></li>
    <li><a id="global-menu--providers" href="https://www.ucas.com/providers">Providers</a></li>
    <li><a id="global-menu--corporate" href="https://www.ucas.com/corporate">Corporate</a></li>
  </ul>
  <ul class="global-menu--secondary">
    <li data-ucas-content="PageStatus" data-ucas-content-optional><a href="../../nojs.html" class="global-menu--beta">Beta version</a></li>
    <li><a href="https://www.ucas.com/contact-us">Contact</a></li>
    <li data-ucas-content="PrimaryFeedbackLink" data-ucas-content-optional><a href="../../nojs.html" class="global-menu--feedback" >Feedback</a></li>
  </ul>
</nav>
<!-- END global menu component -->

    </div>
  </div>
</section>
<!-- END header upper component -->

<header class="section section--header" id="section--header">
  <div class="section__inner-wrapper">
    <div class="grid-container grid-12">
      <div class="grid__column-12">
          <!-- START header component -->
<!-- START UCAS corporate logo component -->
<a class="logo" data-ucas-content="UcasLogoLink" href="../../../index.html">  <div class="logo__image"><img alt="UCAS" src="../../../images/logo.png" /></div>
  <span class="logo__strapline">At the heart of connecting people to higher education</span>
</a><!-- END UCAS corporate logo component -->

<!-- START user-menu-logged-out component -->
<nav class="user-menu-wrapper" data-ucas-content="UcasUserMenu" data-ucas-content-optional>
  <ul class="user-menu">
    <li class="menu__item menu__item__log-in menu__item--with-image is-collapsible-toggle">
      <a href="https://www.ucas.com/ucas/undergraduate/login" class="menu__toggle">Sign in</a>
      <ul class="menu__sub-menu is-collapsible-content">
        <li class="menu__item"><a href="https://www.ucas.com/ucas/undergraduate/login" class="menu__link">Undergraduate <span>sign in services</span></a></li>
        <li class="menu__item"><a href="https://www.ucas.com/ucas/conservatoires/login" class="menu__link">Conservatoires <span>sign in services</span></a></li>
        <li class="menu__item"><a href="https://www.ucas.com/ucas/after-gcses/login" class="menu__link">Progress <span>sign in services</span></a></li>
        <li class="menu__item"><a href="https://www.ucas.com/ucas/teacher-training/login" class="menu__link">Teacher Training <span>sign in services</span></a></li>
        <li class="menu__item"><a href="https://www.ucas.com/ucas/postgraduate/login" class="menu__link">Postgraduate <span>sign in services</span></a></li>
        <li class="menu__item"><a href="https://www.ucas.com/ucas/advisers/login" class="menu__link">Adviser <span>sign in services</span></a></li>
      </ul>
    </li>
    <li class="menu__item menu__item__register menu__item--with-image is-collapsible-toggle">
      <a href="https://www.ucas.com/ucas/undergraduate/register" class="menu__toggle">Register</a>
      <ul class="menu__sub-menu is-collapsible-content">
        <li class="menu__item"><a href="https://www.ucas.com/ucas/undergraduate/register" class="menu__link">Undergraduate <span>registration services</span></a></li>
        <li class="menu__item"><a href="https://www.ucas.com/ucas/conservatoires/register" class="menu__link">Conservatoires <span>registration services</span></a></li>
        <li class="menu__item"><a href="https://www.ucas.com/ucas/after-gcses/register" class="menu__link">Progress <span>registration services</span></a></li>
        <li class="menu__item"><a href="https://www.ucas.com/ucas/teacher-training/register" class="menu__link">Teacher Training <span>registration services</span></a></li>
        <li class="menu__item"><a href="https://www.ucas.com/ucas/postgraduate/register" class="menu__link">Postgraduate <span>registration services</span></a></li>
        <li class="menu__item"><a href="https://www.ucas.com/ucas/advisers/register" class="menu__link">Adviser <span>registration services</span></a></li>
      </ul>
    </li>
  </ul>
</nav>
<!-- END user-menu-logged-out component -->

<!-- END header component -->

      </div>
    </div>
  </div>
</header>

<!-- END header_complete component -->