Page elements

Page head

The page head is used on all pages of the main Oxfordshire County Council website.

<header class="occlss-page-head">
  <div class="occlss-wrapper occlss-page-head__wraper  ">
    <!--START wrapper block-->
    <div class="occlss-layout">
      <!--START layout block-->
      <div class="occlss-layout__col occlss-layout__col--sm-12 occlss-layout__col--bleed occlss-page-head__nav">
        <nav class="occlss-site-nav">
          <a href="https://www.oxfordshire.gov.uk" class="occlss-site-nav__logo-link"
            title="Back to Oxfordshire County Council Home">
            <img src="/assets/images/occlss/logo.svg" class="occlss-head-logo" alt="Oxfordshire County Council logo">
          </a>
        </nav>
      </div>
    </div>
    <!--End layout block -->
    <!--End layout block -->
  </div>
  <!--End wrapper block -->
</header>

Page head mobile menu

This is the page head to be used by all third-parties Oxfordshire County Council-branded websites.

<header class="occlss-page-head">
  <div class="occlss-wrapper occlss-page-head__wraper">
    <!--START wrapper block-->
    <div class="occlss-layout">
      <!--START layout block-->
      <div class="occlss-layout__col occlss-layout__col--sm-12 occlss-layout__col--bleed occlss-page-head__nav">
        <nav class="occlss-site-nav occlss-site-nav--mobile">
          <a href="https://www.oxfordshire.gov.uk" class="occlss-site-nav__logo-link"
            title="Back to Oxfordshire County Council Home">
            <img src="/assets/images/occlss/logo.svg" class="occlss-head-logo" alt="Oxfordshire County Council logo">
          </a>
          <a href="javascript:void(0);" class="occlss-site-nav__toggler js-occlss-nav-toggler-button">
            Menu
          </a>
          <ul class="occlss-site-nav__list">
            <li class="occlss-site-nav__item">
              <a href="https://service.oxfordshire.gov.uk/auth?returnurl=http://www.oxfordshire.gov.uk" class="occlss-site-nav__link">My account</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
    <!--End layout block -->
  </div>
  <!--End wrapper block -->
</header>

This is the page head to be used by all third-parties Oxfordshire County Council-branded websites if secondary menu and search box required.

<header class="occlss-page-head">
  <div class="occlss-wrapper occlss-page-head__wraper">
    <!--START wrapper block-->
    <div class="occlss-layout">
      <!--START layout block-->
      <div class="occlss-layout__col occlss-layout__col--sm-12 occlss-layout__col--bleed occlss-page-head__nav">
        <nav class="occlss-site-nav occlss-site-nav--mobile">
          <a href="https://www.oxfordshire.gov.uk" class="occlss-site-nav__logo-link"
            title="Back to Oxfordshire County Council Home">
            <img src="/assets/images/occlss/logo.svg" class="occlss-head-logo" alt="Oxfordshire County Council logo">
          </a>
          <a href="javascript:void(0);" class="occlss-site-nav__toggler js-occlss-nav-toggler-button">
            Menu
          </a>
          <ul class="occlss-site-nav__list">
            <li class="occlss-site-nav__item">
              <a href="https://service.oxfordshire.gov.uk/auth?returnurl=http://www.oxfordshire.gov.uk" class="occlss-site-nav__link">My account</a>
            </li>
          </ul>
        </nav>
        <div id="secondary-nav" class="occlss-secondary-site-nav  occlss-secondary-site-nav--mobile js-occlss-secondary-site-nav">
          <div class="occlss-wrapper">
            <div class="occlss-secondary-site-nav__container">
              <div class="occlss-layout occlss-layout">
                <div class="occlss-layout__col occlss-layout__col--md-8 occlss-secondary-site-nav__menu">
                  <ul class="occlss-secondary-site-nav__list">
                    <li class="occlss-secondary-site-nav__item">
                      <a href="#" class="occlss-secondary-site-nav__link">Home</a>
                    </li>
                    <li class="occlss-secondary-site-nav__item">
                      <a href="#" class="occlss-secondary-site-nav__link">All news</a>
                    </li>
                    <li class="occlss-secondary-site-nav__item">
                      <a href="#" class="occlss-secondary-site-nav__link">News by topic</a>
                    </li>
                    <li class="occlss-secondary-site-nav__item">
                      <a href="#" class="occlss-secondary-site-nav__link">Media Library</a>
                    </li>
                  </ul>
                </div>
                <div class="occlss-layout__col occlss-layout__col--md-4">
                  <div class="occlss-form occlss-form--small" action="#" method="post" novalidate>
                    <div class="occlss-layout">
                      <div class="occlss-form__short-search-group occlss-layout__col occlss-layout__col--sm-10 occlss-layout__col--md-9 occlss-layout__col--12 occlss-layout__col--bleed">
                        <div class="occlss-form-cntrls occlss-form-cntrls--short-search occlss-form-cntrls--small">
                          <label class="occlss-u-visuallyhidden occlss-g-text-color-white" for="occlss-short-search-form-input-da1d121aq">Search</label>
                          <input type="text" class="occlss-form-cntrls__input occlss-form-cntrls__input--short-search" id="occlss-short-search-form-input-da1d121aq" name="Search" placeholder="Search news">
                        </div>
                      </div>
                      <div class="occlss-layout__col occlss-layout__col--sm-2 occlss-layout__col--md-3 occlss-layout__col--12 occlss-layout__col--bleed">
                        <button type="submit" class="occlss-button occlss-button--search occlss-button--fullwidth occlss-form__short-search-submit">
                          Search
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--End layout block -->
  </div>
  <!--End wrapper block -->
</header>

How to use this component

The page head should be used at the top of every webpage. The top-right of the page head can contain a link to the third-party log in in the format “Log into ‘service name’”.

Changelog

2.1.0

  • Page head mobile menu and secondary menu and search bar Added

1.0.0

  • Component added