Pagination

Examples


<ul class="pagination">
  <li class="pagination__item">
    <a href="#noop" class="arrow arrow--reversed" rel="prev">Previous</a>
  </li>
  <li class="pagination__item">
    <a href="#noop" class="pagination__link">1</a>
  </li>
  <li class="pagination__item">
    <a href="#noop" class="pagination__link">2</a>
  </li>
  <li class="pagination__item">
    <span class="pagination__current">3</span>
  </li>
  <li class="pagination__item">
    <a href="#noop" class="pagination__link">4</a>
  </li>
  <li class="pagination__item">
    <a href="#noop" class="arrow" rel="next">Next</a>
  </li>
</ul>

    

<ul class="pagination">
  <li class="pagination__item">
    <span class="arrow arrow--reversed arrow--disabled">Previous</span>
  </li>
  <li class="pagination__item">
    <span class="pagination__current">1</span>
  </li>
  <li class="pagination__item">
    <a href="#noop" class="pagination__link">2</a>
  </li>
  <li class="pagination__item">
    <a href="#noop" class="pagination__link">3</a>
  </li>
  <li class="pagination__item">
    <span class="pagination__dots">...</span>
  </li>
  <li class="pagination__item">
    <a href="#noop" class="pagination__link">8</a>
  </li>
  <li class="pagination__item">
    <a href="#noop" class="pagination__link">9</a>
  </li>
  <li class="pagination__item">
    <a href="#noop" class="pagination__link">10</a>
  </li>
  <li class="pagination__item">
    <a href="#noop" class="arrow" rel="next">Next</a>
  </li>
</ul>

    

<ul class="pagination">
  <li class="pagination__item">
    <a href="#noop" class="arrow arrow--reversed" rel="prev">Previous</a>
  </li>
  <li class="pagination__item">
    <a href="#noop" class="pagination__link">1</a>
  </li>
  <li class="pagination__item">
    <a href="#noop" class="pagination__link">2</a>
  </li>
  <li class="pagination__item">
    <span class="pagination__current">3</span>
  </li>
  <li class="pagination__item">
    <a href="#noop" class="pagination__link">4</a>
  </li>
  <li class="pagination__item">
    <span class="pagination__dots">...</span>
  </li>
  <li class="pagination__item">
    <a href="#noop" class="pagination__link">9</a>
  </li>
  <li class="pagination__item">
    <a href="#noop" class="pagination__link">10</a>
  </li>
  <li class="pagination__item">
    <a href="#noop" class="arrow" rel="next">Next</a>
  </li>
</ul>

    

<ul class="pagination">
  <li class="pagination__item">
    <a href="#noop" class="arrow arrow--reversed" rel="prev">Previous</a>
  </li>
  <li class="pagination__item">
    <a href="#noop" class="pagination__link">1</a>
  </li>
  <li class="pagination__item">
    <span class="pagination__dots">...</span>
  </li>
  <li class="pagination__item">
    <a href="#noop" class="pagination__link">4</a>
  </li>
  <li class="pagination__item">
    <span class="pagination__current">5</span>
  </li>
  <li class="pagination__item">
    <a href="#noop" class="pagination__link">6</a>
  </li>
  <li class="pagination__item">
    <span class="pagination__dots">...</span>
  </li>
  <li class="pagination__item">
    <a href="#noop" class="pagination__link">10</a>
  </li>
  <li class="pagination__item">
    <a href="#noop" class="arrow" rel="next">Next</a>
  </li>
</ul>

    

<ul class="pagination">
  <li class="pagination__item">
    <a href="#noop" class="arrow arrow--reversed" rel="prev">Previous</a>
  </li>
  <li class="pagination__item">
    <a href="#noop" class="pagination__link">1</a>
  </li>
  <li class="pagination__item">
    <a href="#noop" class="pagination__link">2</a>
  </li>
  <li class="pagination__item">
    <a href="#noop" class="pagination__link">3</a>
  </li>
  <li class="pagination__item">
    <span class="pagination__dots">...</span>
  </li>
  <li class="pagination__item">
    <a href="#noop" class="pagination__link">8</a>
  </li>
  <li class="pagination__item">
    <a href="#noop" class="pagination__link">9</a>
  </li>
  <li class="pagination__item">
    <span class="pagination__current">10</span>
  </li>
  <li class="pagination__item">
    <span class="arrow arrow--disabled">Next</span>
  </li>
</ul>

    

Notes

Additional info

Pagination section in AssetLib.