9 pagination Pagination

Open in new window

This is the pagination component.

Examples
Default styling

Results 1 of 305

  1. Previous
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
Markup: ../../../../../styleguide/styleguide-examples/pagination.njk
<div class="pagination--wrap">
<p>Results 1 of 305</p>
<ol class="pagination">
  <li><a href="#" href="#page=1">
    <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
            <polyline stroke="currentColor" stroke-width="2" points="15 5 8 12 15 19"></polyline>
        </g>
    </svg>
    <span class="sr-only">Previous</span>
  </a></li>
  <li><a href="#" href="#page=2">2</a></li>
  <li class="selected"><a href="#" href="#page=3">3</a></li>
  <li><a href="#" href="#page=4">4</a></li>
  <li><a href="#" href="#page=5">5</a></li>
  <li><a href="#" href="#page=6">6</a></li>
  <li><a href="#" href="#page=7">7</a></li>
  <li><a href="#" href="#page=8">8</a></li>
  <li class="next"><a href="#" href="#page=2">
    <span class="sr-only">Next</span>
    <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
            <polyline stroke="currentColor" stroke-width="2" points="9 19 16 12 9 5"></polyline>
        </g>
    </svg>
  </a></li>
</ol>

</div>
Source: ../kitsune/sumo/static/sumo/scss/components/_pagination.scss, line 4