<nav aria-label="Page navigation">
  <ul class="pagination">
    <li><a href="#!">Previous</a></li>
    <li class="active"><a href="#!">1</a></li>
    <li><a href="#!">2</a></li>
    <li><a href="#!">3</a></li>
    <li><a href="#!">4</a></li>
    <li><a href="#!">5</a></li>
    <li><a href="#!">Next</a></li>
  </ul>
</nav>
<nav aria-label="Page navigation">
  <ul class="pagination pagination-sm">
    <li><a href="#!">Previous</a></li>
    <li class="active"><a href="#!">1</a></li>
    <li><a href="#!">2</a></li>
    <li><a href="#!">3</a></li>
    <li><a href="#!">4</a></li>
    <li><a href="#!">5</a></li>
    <li><a href="#!">Next</a></li>
  </ul>
</nav>
    
  

.pagination {
  @extend  %ftds-pagination;
}
.pagination-sm {
  @extend  %ftds-pagination-small;
}

  
    
<nav aria-label="Page navigation">
  <span class="pagination page-count ftds-m-right--x-small">Page 1 of 5</span>
  <ul class="pagination pagination-sm">
    <li><a href="#!"><i class="fa fa-chevron-left"></i></a></li>
    <li><a href="#!"><i class="fa fa-chevron-right"></i></a></li>
  </ul>
</nav>
    
  

  
    
<nav aria-label="Page navigation">
  <ul class="pagination pagination-sm">
    <li><a href="#!">Previous</a></li>
    <li class="active"><a href="#!">1</a></li>
    <li><a href="#!">2</a></li>
    <li><a href="#!">3</a></li>
    <li><a href="#!">4</a></li>
    <li><a href="#!">5</a></li>
    <li class="disabled"><a href="#!">...</a></li>
    <li><a href="#!">15</a></li>
    <li><a href="#!">Next</a></li>
  </ul>
</nav>
<nav aria-label="Page navigation">
  <ul class="pagination pagination-sm">
    <li><a href="#!">Previous</a></li>
    <li><a href="#!">1</a></li>
    <li class="disabled"><a href="#!">...</a></li>
    <li><a href="#!">7</a></li>
    <li class="active"><a href="#!">8</a></li>
    <li><a href="#!">9</a></li>
    <li class="disabled"><a href="#!">...</a></li>
    <li><a href="#!">15</a></li>
    <li><a href="#!">Next</a></li>
  </ul>
</nav>
<nav aria-label="Page navigation">
  <ul class="pagination pagination-sm">
    <li><a href="#!">Previous</a></li>
    <li><a href="#!">1</a></li>
    <li class="disabled"><a href="#!">...</a></li>
    <li><a href="#!">11</a></li>
    <li><a href="#!">12</a></li>
    <li><a href="#!">13</a></li>
    <li class="active"><a href="#!">14</a></li>
    <li><a href="#!">15</a></li>
    <li><a href="#!">Next</a></li>
  </ul>
</nav>