Simple pagination

Use pagination to help a user move through a set of results that are too long to display on one page.

This is a simpler alternative to full pagination. It's a good fit for search result pages.

<nav class="lbh-simple-pagination">
  <a class="lbh-simple-pagination__link" href="#">
    <svg width="11" height="19" viewBox="0 0 11 19" fill="none">
      <path d="M10 1L2 9.5L10 18" stroke-width="2" />
    </svg>
    Previous page
    <span class="lbh-simple-pagination__title"> Title here </span>
  </a>
  <a
    class="lbh-simple-pagination__link lbh-simple-pagination__link--next"
    href="#"
  >
    Next page
    <span class="lbh-simple-pagination__title"> Title here </span>
    <svg width="11" height="19" viewBox="0 0 11 19" fill="none">
      <path d="M1 18L9 9.5L1 1" stroke-width="2" />
    </svg>
  </a>
</nav>

With page numbers#

<nav class="lbh-simple-pagination">
  <a class="lbh-simple-pagination__link" href="#">
    <svg width="11" height="19" viewBox="0 0 11 19" fill="none">
      <path d="M10 1L2 9.5L10 18" stroke-width="2" />
    </svg>
    Previous page
    <span class="lbh-simple-pagination__title"> 1 of 3 </span>
  </a>
  <a
    class="lbh-simple-pagination__link lbh-simple-pagination__link--next"
    href="#"
  >
    Next page
    <span class="lbh-simple-pagination__title"> 3 of 3 </span>
    <svg width="11" height="19" viewBox="0 0 11 19" fill="none">
      <path d="M1 18L9 9.5L1 1" stroke-width="2" />
    </svg>
  </a>
</nav>

At start#

<nav class="lbh-simple-pagination">
  <a
    class="lbh-simple-pagination__link lbh-simple-pagination__link--next"
    href="#"
  >
    Next page
    <span class="lbh-simple-pagination__title"> 2 of 3 </span>
    <svg width="11" height="19" viewBox="0 0 11 19" fill="none">
      <path d="M1 18L9 9.5L1 1" stroke-width="2" />
    </svg>
  </a>
</nav>