Pagination simple

<div class="pagination">
  <ul class="pagination__list">
    <li class="pagination__list-item disabled previous"><a href="#"><i class="material-icons">chevron_left</i></a></li>
    <li class="pagination__list-item active"><a href="#">1</a></li>
    <li class="pagination__list-item"><a href="#">2</a></li>
    <li class="pagination__list-item"><a href="#">3</a></li>
    <li class="pagination__list-item"><a href="#">4</a></li>
    <li class="pagination__list-item"><a href="#">5</a></li>
    <li class="pagination__list-item next"><a href="#"><i class="material-icons">chevron_right</i></a></li>
  </ul>
</div>

 

Pagination + go to first / last

<div class="pagination">
  <ul class="pagination__list">
    <li class="pagination__list-item disabled go-to-first"><a href="#"><i class="material-icons">first_page</i></a></li>
    <li class="pagination__list-item disabled previous"><a href="#"><i class="material-icons">chevron_left</i></a></li>
    <li class="pagination__list-item active"><a href="#">1</a></li>
    <li class="pagination__list-item"><a href="#">2</a></li>
    <li class="pagination__list-item"><a href="#">3</a></li>
    <li class="pagination__list-item"><a href="#">4</a></li>
    <li class="pagination__list-item"><a href="#">5</a></li>
    <li class="pagination__list-item next"><a href="#"><i class="material-icons">chevron_right</i></a></li>
    <li class="pagination__list-item go-to-last"><a href="#"><i class="material-icons">last_page</i></a></li>
  </ul>
</div>

 

Pagination + pages

<div class="pagination">
<div class="pagination__pages">Page <span class="active">1</span> of 20</div>
  <ul class="pagination__list">
    <li class="pagination__list-item disabled go-to-first"><a href="#"><i class="material-icons">first_page</i></a></li>
    <li class="pagination__list-item disabled previous"><a href="#"><i class="material-icons">chevron_left</i></a></li>
    <li class="pagination__list-item active"><a href="#">1</a></li>
    <li class="pagination__list-item"><a href="#">2</a></li>
    <li class="pagination__list-item"><a href="#">3</a></li>
    <li class="pagination__list-item"><a href="#">4</a></li>
    <li class="pagination__list-item"><a href="#">5</a></li>
    <li class="pagination__list-item next"><a href="#"><i class="material-icons">chevron_right</i></a></li>
    <li class="pagination__list-item go-to-last"><a href="#"><i class="material-icons">last_page</i></a></li>
  </ul>
</div>

 

Pagination + show number of results

<div class="pagination">
<div class="pagination__pages">Page <span class="active">1</span> of 20</div>
  <ul class="pagination__list">
    <li class="pagination__list-item disabled go-to-first"><a href="#"><i class="material-icons">first_page</i></a></li>
    <li class="pagination__list-item disabled previous"><a href="#"><i class="material-icons">chevron_left</i></a></li>
    <li class="pagination__list-item active"><a href="#">1</a></li>
    <li class="pagination__list-item"><a href="#">2</a></li>
    <li class="pagination__list-item"><a href="#">3</a></li>
    <li class="pagination__list-item"><a href="#">4</a></li>
    <li class="pagination__list-item"><a href="#">5</a></li>
    <li class="pagination__list-item next"><a href="#"><i class="material-icons">chevron_right</i></a></li>
    <li class="pagination__list-item go-to-last"><a href="#"><i class="material-icons">last_page</i></a></li>
    </ul>
</div>

<div class="pagination__show-results">
  <div class="form-field form-field--select form-field--pagination">
    <label for="show-results">Show results</label>
    <select name="show-results" id="show-results">
      <option value="value-here" selected>50</option>
      <option value="value-here">100</option>
      <option value="value-here">200</option>
    </select>
  </div>
</div>