Pagination

All of the pages


How we design them

How they look

View demo Open in new window
320 x 568
View code
<nav aria-label="pagination" class="gg-c-pagination__container">
  <ul class="gg-c-pagination__container">
    <li class="gg-c-pagination__item gg-c-pagination__first">
      <a href="#" title="First">
        <svg class="gg-u-icon gg-u-icon--medium" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.75 19.47c-1.2-1.3-2.3-2.1-3.5-3.4a4 4 0 00-.6-.7c-.7-.7-1.1-1.2-1.8-1.8L6.25 12l.6-.6c2.4-2.1 4.4-4.7 6.7-7a.49.49 0 000-.68 7.88 7.88 0 00-1.8-1.8c-.2-.1-.3 0-.5.1h-.1c-.6.2-1.1 1-1.6 1.5-1.3 1.3-2.6 2.7-4 4.1s-2.7 2.5-3.9 3.9l-.1.1a.48.48 0 000 .68c1.6 1.6 3.1 3.4 4.7 5s3.3 3.1 4.9 4.7a.47.47 0 00.67 0l1.9-1.9c.28-.1.28-.43.03-.63z"/><path d="M21.7 19.47c-1.2-1.3-2.3-2.1-3.5-3.4a3.64 3.64 0 00-.6-.7c-.7-.7-1.1-1.2-1.8-1.8L14.2 12l.6-.6c2.4-2.1 4.4-4.7 6.7-7a.48.48 0 000-.68 7.5 7.5 0 00-1.8-1.8c-.2-.1-.3 0-.5.1h-.1c-.6.2-1.1 1-1.6 1.5-1.3 1.3-2.6 2.7-4 4.1s-2.7 2.5-3.9 3.9l-.1.1a.49.49 0 000 .68c1.6 1.6 3.1 3.4 4.7 5s3.3 3.1 4.9 4.7a.49.49 0 00.68 0l1.9-1.9c.22-.1.22-.43.02-.63z"/></svg>
      </a>
    </li>
    <li class="gg-c-pagination__item gg-c-pagination__prev">
      <a href="#" title="Previous"><img class="gg-u-icon gg-u-icon--large" src="https://www.giffgaff.design/iconography/icons/library/chevron-left.svg" /></a>
    </li>
  </ul>
  <ul class="gg-c-pagination">
    <li><a href="#" class="gg-c-pagination__item gg-u-icon--large gg-c-pagination__goto" title="Page 1">1</a></li>
    <li><a href="#" class="gg-c-pagination__item gg-u-icon--large gg-c-pagination__item--current-page" title="Page 2">2</a></li>
    <li><a href="#" class="gg-c-pagination__item gg-u-icon--large gg-c-pagination__goto" title="Page 3">3</a></li>
  </ul>
  <ul class="gg-c-pagination__container">
    <li class="gg-c-pagination__item gg-c-pagination__next">
      <a href="#" title="Previous"><img class="gg-u-icon gg-u-icon--large" src="https://www.giffgaff.design/iconography/icons/library/chevron-right.svg" /></a>
    </li>
    <li class="gg-c-pagination__item gg-c-pagination__last">
      <a href="#" title="Last" class="gg-c-pagination__last--item">
        <svg class="gg-u-icon gg-u-icon--medium" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.93 4.54c1.2 1.3 2.3 2.1 3.5 3.4a3.64 3.64 0 00.6.7c.7.7 1.1 1.2 1.8 1.8l1.6 1.56-.6.6c-2.4 2.1-4.4 4.7-6.7 7a.49.49 0 000 .68 7.69 7.69 0 001.8 1.8c.2.1.3 0 .5-.1h.1c.6-.2 1.1-1 1.6-1.5 1.3-1.3 2.6-2.7 4-4.1s2.7-2.5 3.9-3.9l.1-.1a.49.49 0 000-.68c-1.6-1.6-3.1-3.4-4.7-5s-3.3-3.1-4.9-4.7a.49.49 0 00-.68 0l-1.9 1.9c-.22.1-.22.44-.02.64z"/><path d="M2 4.54c1.2 1.3 2.3 2.1 3.5 3.4a3.64 3.64 0 00.6.7c.7.7 1.1 1.2 1.8 1.8L9.47 12l-.6.6c-2.4 2.1-4.4 4.7-6.7 7a.49.49 0 000 .68A7.88 7.88 0 004 22.11c.2.1.3 0 .5-.1h.1c.6-.2 1.1-1 1.6-1.5 1.3-1.3 2.6-2.7 4-4.1s2.7-2.5 3.9-3.9l.1-.1a.47.47 0 000-.68c-1.6-1.6-3.1-3.4-4.7-5S6.17 3.61 4.57 2a.49.49 0 00-.68 0L2 3.91c-.23.09-.23.43 0 .63z"/></svg>
      </a>
    </li>
  </ul>
</nav>