Navigation

A to Z

A to Z default

The A to Z component is in the footer of every page on the website. It allows some users to find a service by its name.

Open this a to z example in a new tab
HTML
<div class="occlss-a-to-z ">
  <div class="occlss-wrapper occlss-a-to-z__wraper">
    <ul class="occlss-a-to-z__listitems">
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/A">A</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/B">B</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/C">C</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/D">D</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/E">E</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/F">F</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/G">G</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/H">H</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/I">I</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/J">J</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/K">K</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/L">L</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/M">M</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/N">N</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/O">O</a>
      </li>
      <li class="occlss-a-to-z__item">
        <span class="occlss-a-to-z__letter occlss-a-to-z__letter--off">Y</span>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/Q">Q</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/R">R</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/S">S</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/T">T</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/U">U</a>
      </li>
      <li class="occlss-a-to-z__item">
        <span class="occlss-a-to-z__letter occlss-a-to-z__letter--off">Y</span>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/W">W</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/X">X</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/Y">Y</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/Z">Z</a>
      </li>
    </ul>
  </div>
</div>

A to Z inverse

Open this a to z inverse example in a new tab
HTML
<div class="occlss-a-to-z occlss-a-to-z--inverse">
  <div class="occlss-wrapper occlss-a-to-z__wraper">
    <ul class="occlss-a-to-z__listitems">
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/A">A</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/B">B</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/C">C</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/D">D</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/E">E</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/F">F</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/G">G</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/H">H</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/I">I</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/J">J</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/K">K</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/L">L</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/M">M</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/N">N</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/O">O</a>
      </li>
      <li class="occlss-a-to-z__item">
        <span class="occlss-a-to-z__letter occlss-a-to-z__letter--off">Y</span>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/Q">Q</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter occlss-a-to-z__letter--selected" href="https://www.oxfordshire.gov.uk/cms/atoz/R">R</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/S">S</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/T">T</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/U">U</a>
      </li>
      <li class="occlss-a-to-z__item">
        <span class="occlss-a-to-z__letter occlss-a-to-z__letter--off">Y</span>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/W">W</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/X">X</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/Y">Y</a>
      </li>
      <li class="occlss-a-to-z__item">
        <a class="occlss-a-to-z__letter " href="https://www.oxfordshire.gov.uk/cms/atoz/Z">Z</a>
      </li>
    </ul>
  </div>
</div>

Changelog

2.4.4

  • Colours changed to support solve the accessibility issue

1.0.0

  • Component added