Pagination (Paginación)

Revisa y prueba el componente en código

Observa los componentes y sus propiedades para adaptarlos a tus necesidades específicas.

Navegación entre páginas de resultados. Usa el bloque BEM .cl-pagination y su filtro asociado.

Numbers

<nav class="cl-pagination" aria-label="Paginación">
  <span class="cl-pagination__info">1 - 10 de 123 resultados</span>
</nav>

Botones

<nav class="cl-pagination" aria-label="Paginación">
  <button class="cl-pagination__button" type="button">Anterior</button>
  <button class="cl-pagination__button is-current" type="button" aria-current="page">1</button>
  <button class="cl-pagination__button" type="button">2</button>
  <button class="cl-pagination__button" type="button">3</button>
  <button class="cl-pagination__button" type="button">Siguiente</button>
</nav>

+10 pages

<nav class="cl-pagination" aria-label="Paginación">
  <button class="cl-pagination__button" type="button">Anterior</button>
  <button class="cl-pagination__button" type="button">1</button>
  <span class="cl-pagination__ellipsis">...</span>
  <button class="cl-pagination__button" type="button">10</button>
  <button class="cl-pagination__button" type="button">Siguiente</button>
</nav>

Filtro

<div class="cl-pagination-filter">
  <label class="cl-pagination-filter__label" for="cl-pagination-filter-1">Mostrar</label>
  <select class="cl-pagination-filter__input" id="cl-pagination-filter-1">
    <option>10</option>
    <option selected>20</option>
    <option>50</option>
  </select>
</div>