24/Acciones y etiquetas

Paginación

Botones de página con anterior, siguiente y elipsis.

Básica

HTML

<nav aria-label="Paginación">
  <ul class="cb-pagination">
    <li><a class="cb-pagination__item" href="#" aria-label="Página anterior">←<span class="cb-pagination__label">&nbsp;Anterior</span></a></li>
    <li><a class="cb-pagination__item" href="#">1</a></li>
    <li><a class="cb-pagination__item" href="#" aria-current="page">2</a></li>
    <li><a class="cb-pagination__item" href="#">3</a></li>
    <li class="cb-pagination__ellipsis" aria-hidden="true">…</li>
    <li><a class="cb-pagination__item" href="#">12</a></li>
    <li><a class="cb-pagination__item" href="#" aria-label="Página siguiente"><span class="cb-pagination__label">Siguiente&nbsp;</span>→</a></li>
  </ul>
</nav>

Clases y modificadores

Clase	Descripción
`.cb-pagination`	Lista en fila.
`.cb-pagination__item`	Página. `aria-current="page"` o `.is-active` la marca.
`.cb-pagination__ellipsis`	Puntos suspensivos.
`.cb-pagination__label`	Texto que se oculta en móvil.

Accesibilidad

Envuélvela en nav aria-label="Paginación".
Las flechas necesitan aria-label cuando el texto se oculta.