GEF
Menú

Listado alfabético

Listado para colecciones ordenadas alfabéticamente.

Contenido

Listado alfabético

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.

Listado alfabético

<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>
Subir