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.