The A to Z component can be used to create a list of links to supporting information/terminology.
Example markup
<ul class="atoz"> <li class="atoz__item"> <a class="atoz__link" href="#A">A</a> </li> <li class="atoz__item"> <a class="atoz__link atoz__link--active" href="#B">B</a> </li> <li class="atoz__item"> <a class="atoz__link" href="#C">C</a> </li> <li class="atoz__item"> <a class="atoz__link" href="#D">D</a> </li> <li class="atoz__item"> <a class="atoz__link" href="#E">E</a> </li> <li class="atoz__item"> <a class="atoz__link" href="#F">F</a> </li> <li class="atoz__item"> <a class="atoz__link" href="#G">G</a> </li> <li class="atoz__item"> <a class="atoz__link" href="#H">H</a> </li> <li class="atoz__item"> <a class="atoz__link" href="#I">I</a> </li> <li class="atoz__item"> <a class="atoz__link" href="#J">J</a> </li> <li class="atoz__item"> <a class="atoz__link" href="#K">K</a> </li> <li class="atoz__item"> <a class="atoz__link" href="#L">L</a> </li> <li class="atoz__item"> <a class="atoz__link" href="#M">M</a> </li> <li class="atoz__item"> <a class="atoz__link" href="#N">N</a> </li> <li class="atoz__item"> <a class="atoz__link" href="#O">O</a> </li> <li class="atoz__item"> <a class="atoz__link" href="#P">P</a> </li> <li class="atoz__item"> <a class="atoz__link" href="#Q">Q</a> </li> <li class="atoz__item"> <a class="atoz__link" href="#R">R</a> </li> <li class="atoz__item"> <a class="atoz__link" href="#S">S</a> </li> <li class="atoz__item"> <a class="atoz__link" href="#T">T</a> </li> <li class="atoz__item"> <a class="atoz__link" href="#U">U</a> </li> <li class="atoz__item"> <a class="atoz__link" href="#V">V</a> </li> <li class="atoz__item"> <a class="atoz__link" href="#W">W</a> </li> <li class="atoz__item"> <a class="atoz__link" href="#X">X</a> </li> <li class="atoz__item"> <a class="atoz__link" href="#Y">Y</a> </li> <li class="atoz__item"> <a class="atoz__link" href="#Z">Z</a> </li> </ul>
Example output
Letters without any associated entries should be omitted from the A to Z.
An additional CSS class (atoz__link--active) should be applied to the link for the selected letter.