Pagination

In groundhog since v0.1.1

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

Pagination > 6 entries must be concatenated using ellipsis ... after the first and last 3 entries.
If first entry is selected as current entry, .arrow--disabled must be added to the corresponding .arrow.
Vice versa for last entry. (Navigation out of bounds must not occur.)
First and last entry always remain, entries between predecessor and successor of current page get hidden and represented via ellipsis ....
Special cases for 3rd and 3rd-to-last entry; as there occur 4 entries in a row, the opposite section features 2 entries instead of 1 or 3.

Additional info

Pagination section in AssetLib.