Listado para colecciones ordenadas alfabéticamente.
Para usar el listado alfabético, se emplearán los elementos de lista ol
o ul
con clase .alpha-list
, donde los li
deberán tener la clase .alpha-list__item
. Si un elemento de la lista no dispone de enlace (no contiene ningún resultado por esa letra), se le puede añadir la clase .inactive
para indicar que es un a
sin atributo href
.
<div class="alpha-list ruler ruler--double">
<ul>
<li class="alpha-list__item">
<a href="#" title="Letra A" aria-label="Letra A">A</a>
</li>
<li class="alpha-list__item is-active">
<span aria-current="true">B</span>
</li>
<li class="alpha-list__item">
<a href="#" title="Letra C" aria-label="C">C</a>
</li>
<li class="alpha-list__item">
<a href="#" title="Letra Ç" aria-label="Ç">Ç</a>
</li>
<li class="alpha-list__item">
<a href="#" title="Letra D" aria-label="D">D</a>
</li>
<li class="alpha-list__item">
<a href="#" title="Letra E" aria-label="E">E</a>
</li>
<li class="alpha-list__item">
<a href="#" title="Letra F" aria-label="F">F</a>
</li>
<li class="alpha-list__item inactive">G</li>
<li class="alpha-list__item">
<a href="#" title="Letra H" aria-label="H">H</a>
</li>
<li class="alpha-list__item">
<a href="#" title="Letra I" aria-label="I">I</a>
</li>
<li class="alpha-list__item">
<a href="#" title="Letra J" aria-label="J">J</a>
</li>
<li class="alpha-list__item inactive">K</li>
<li class="alpha-list__item">
<a href="#" title="Letra L" aria-label="L">L</a>
</li>
<li class="alpha-list__item">
<a href="#" title="Letra M" aria-label="M">M</a>
</li>
<li class="alpha-list__item inactive">N</li>
<li class="alpha-list__item inactive">Ñ</li>
<li class="alpha-list__item">
<a href="#" title="Letra O" aria-label="O">O</a>
</li>
<li class="alpha-list__item inactive">P</li>
<li class="alpha-list__item inactive">Q</li>
<li class="alpha-list__item">
<a href="#" title="Letra R" aria-label="R">R</a>
</li>
<li class="alpha-list__item">
<a href="#" title="Letra S" aria-label="S">S</a>
</li>
<li class="alpha-list__item">
<a href="#" title="Letra T" aria-label="T">T</a>
</li>
<li class="alpha-list__item">
<a href="#" title="Letra U" aria-label="U">U</a>
</li>
<li class="alpha-list__item inactive">V</li>
<li class="alpha-list__item inactive">W</li>
<li class="alpha-list__item">
<a href="#" title="Letra X" aria-label="X">X</a>
</li>
<li class="alpha-list__item inactive">Y</li>
<li class="alpha-list__item inactive">Z</li>
</ol>
</div>