Page elements

Page footer

Page footer full

The full footer is displayed at the bottom of every page on the main Oxfordshire County Council website.

The footer contains a simple service directory, contact information and well as other links that some users will expect to find in a footer, for example, terms and conditions and sitemap. It also contains statutory information about cookies and privacy.

Open this page footer full example in a new tab
HTML
<footer class="occlss-page-footer" id="occlss-footer">
  <div class="occlss-wrapper occlss-page-footer__wraper">
    <!--START wrapper block-->
    <div class="occlss-layout occlss-layout--gutter-s">
      <!--START layout block-->
      <div class="occlss-layout__col occlss-layout__col--sm-5 s-cms-content-footer">
        <!--START layout elemnt -->
        <h2>Oxfordshire County Council</h2>
        <p>County Hall, New Road, Oxford, OX1 1ND</p>
        <p><a href="https://www.oxfordshire.gov.uk/residents/contact-council/contact-us" class="occlss-u-more-link">Contact us<span class="occlss-icon occlss-icon--arrow-right-long-right-secondary" aria-hidden="true"><svg aria-hidden="true" class="occlss-icon__container occlss-u-more-link__icon">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#arrow-right-long-right-secondary" class="icon__source icon__source--svg"></use>
              </svg></span></a></p>
        <ul class="icon-list">
          <li>
            <a href="http://www.facebook.com/OxfordshireCountyCouncil" target="_blank" id="occlss_facebook_lnk">
              <span class="occlss-icon occlss-icon--facebook" id="occlss_facebook_icon">
                <svg title="Oxfordshire county council on facebook" class="occlss-icon__container">
                  <title>Oxfordshire county council on facebook</title>
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#facebook" class="icon__source icon__source--svg"></use>
                </svg>
              </span>
            </a>
          </li>
          <li>
            <a href="http://www.twitter.com/oxfordshirecc" target="_blank" id="occlss_twitter_lnk">
              <span class="occlss-icon occlss-icon--twitter" id="occlss_twitter_icon">
                <svg title="Oxfordshire county council on twitter" class="occlss-icon__container">
                  <title>Oxfordshire county council on twitter</title>
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#twitter" class="icon__source icon__source--svg"></use>
                </svg>
              </span>
            </a>
          </li>
          <li>
            <a href="https://www.oxfordshire.gov.uk/cms/feeds/top-stories.xml" target="_blank" id="occlss_rss_lnk">
              <span class="occlss-icon occlss-icon--rss" id="occlss_rss_icon">
                <svg title="Top stories rss feed" class="occlss-icon__container">
                  <title>Top stories rss feed</title>
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#rss" class="icon__source icon__source--svg"></use>
                </svg>
              </span>
            </a>
          </li>
          <li>
            <a href="https://www.linkedin.com/company/oxfordshire-county-council" target="_blank" id="occlss_linkedin_lnk">
              <span class="occlss-icon occlss-icon--linkedin">
                <svg class="occlss-icon__container">
                  <title>Oxfordshire county council on linkedin</title>
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#linkedin" class="icon__source icon__source--svg"></use>
                </svg>
              </span>
            </a>
          </li>
          <li>
            <a href="https://www.instagram.com/oxfordshirecc" target="_blank" id="occlss_instagram_lnk">
              <span class="occlss-icon occlss-icon--instagram">
                <svg class="occlss-icon__container">
                  <title>Oxfordshire county council on instagram</title>
                  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/images/occlss/occlss-sprite.svg#instagram" class="icon__source icon__source--svg"></use>
                </svg>
              </span>
            </a>
          </li>
        </ul>
        <h2>Sign up for the YourOxfordshire newsletter</h2>
        <p>Get the latest news direct to your inbox every month.</p>
        <div class="occlss-layout occlss-u-tspace-sm">
          <div class="occlss-layout__col occlss-layout__col--xs-12 occlss-layout__col--md-8 occlss-layout__col--bleed occlss-form__sign-up-form-controls"><a href="http://oxfordshire.us1.list-manage1.com/subscribe?u=feb3ea90bfa82dcb90c21a3e7&id=206c6fb447" class="occlss-button occlss-button--primary occlss-button--fullwidth occlss-form__sign-up-form-submit" target="_blank">Sign up to the newsletter</a></div>
        </div>
      </div>
      <!--End layout elemnt -->
      <div class="occlss-layout__col occlss-layout__col--sm-4 s-cms-content-footer">
        <!--START layout elemnt -->
        <h2>Services</h2>
        <ul>
          <li>
            <a href="https://www.oxfordshire.gov.uk/business">Business</a>
          </li>
          <li>
            <a href="https://www.oxfordshire.gov.uk/residents/children-education-and-families">Children, education and families</a>
          </li>
          <li>
            <a href="https://www.oxfordshire.gov.uk/residents/community-and-living">Community and living</a>
          </li>
          <li>
            <a href="https://www.oxfordshire.gov.uk/residents/environment-and-planning">Environment and planning</a>
          </li>
          <li>
            <a href="https://www.oxfordshire.gov.uk/residents/fire-and-public-safety">Fire and public safety</a>
          </li>
          <li>
            <a href="https://www.oxfordshire.gov.uk/residents/leisure-and-culture">Leisure and culture</a>
          </li>
          <li>
            <a href="https://www.oxfordshire.gov.uk/residents/roads-and-transport">Roads and transport</a>
          </li>
          <li>
            <a href="https://www.oxfordshire.gov.uk/residents/social-and-health-care">Social and health care</a>
          </li>
        </ul>
      </div>
      <!--End layout elemnt -->
      <div class="occlss-layout__col occlss-layout__col--sm-3 s-cms-content-footer">
        <!--START layout elemnt -->
        <h2>Information</h2>
        <ul>
          <li>
            <a href="https://www.oxfordshire.gov.uk/council/about-your-council/access-data-and-information">Access to information</a>
          </li>
          <li>
            <a href="https://www.oxfordshire.gov.uk/council/about-website/help-using-site">Accessibility options</a>
          </li>
          <li>
            <a href="https://www.oxfordshire.gov.uk/council/about-website/terms-and-conditions">Terms and conditions</a>
          </li>
          <li>
            <a href="https://www.oxfordshire.gov.uk/residents/environment-and-planning">How we use cookies</a>
          </li>
          <li>
            <a href="https://www.oxfordshire.gov.uk/council/about-website/terms-and-conditions#privacy">Privacy</a>
          </li>
          <li>
            <a href="https://www.oxfordshire.gov.uk/cms/sitemap">Sitemap</a>
          </li>
          <li>
            <a href="http://www.gov.uk/">GOV.UK</a>
          </li>
          <li>
            <a href="https://www.gov.uk/government/brexit">Brexit information on GOV.UK</a>
          </li>
        </ul>
      </div>
      <!--End layout elemnt -->
    </div>
    <!--End layout block -->
  </div>
  <!--End wrapper block -->
</footer>

Page footer short

Open this page footer short example in a new tab
HTML
<footer class="occlss-page-footer" id="occlss-footer">
  <div class="occlss-wrapper occlss-page-footer__wraper">
    <!--START wrapper block-->
    <div class="occlss-layout occlss-layout--gutter-s">
      <!--START layout block-->
      <div class="occlss-layout__col occlss-layout__col--sm-5 s-cms-content-footer">
        <!--START layout elemnt -->
        <h2>Oxfordshire County Council</h2>
        <p>County Hall, New Road, Oxford, OX1 1ND</p>
      </div>
      <!--End layout elemnt -->
      <!--End layout elemnt -->
      <!--End layout elemnt -->
    </div>
    <!--End layout block -->
  </div>
  <!--End wrapper block -->
</footer>

When to use this component

This footer is displayed on third-party Oxfordshire County Council-branded websites. It contains contact information and links to statutory information only.

Changelog

2.2.0

  • Footer headings adjusted

1.0.0

  • Component added