Pagination

TorqueUI is a responsive web design centric UI Framework with components made for the modern web.
 
Download TorqueUI

Pagination

Pagination component

<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><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="#">»</a></li>
</ul>
<ul class="pagination">
  <li><a href="#"><i class="fa fa-angle-double-left"></i></a></li>
  <li><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="#"><i class="fa fa-angle-double-right"></i></a></li>
</ul>
<ul class="pagination">
  <li><a href="#"><i class="fa fa-angle-left"></i></a></li>
  <li><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="#"><i class="fa fa-angle-right"></i></a></li>
</ul>
<ul class="pagination">
  <li><a href="#">«</a></li>
  <li class="current"><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="#">»</a></li>
</ul>
<ul class="pagination">
  <li><a href="#">«</a></li>
  <li class="is-disabled"><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="#">»</a></li>
</ul>

Sizes

<ul class="pagination large">
  <li><a href="#">«</a></li>
  <li class="is-disabled"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li class="current"><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">»</a></li>
</ul>
<ul class="pagination default">
  <li><a href="#">«</a></li>
  <li class="is-disabled"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li class="current"><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">»</a></li>
</ul>
<ul class="pagination small">
  <li><a href="#">«</a></li>
  <li class="is-disabled"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li class="current"><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">»</a></li>
</ul>
<ul class="pagination xsmall">
  <li><a href="#">«</a></li>
  <li class="is-disabled"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li class="current"><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">»</a></li>
</ul>
  • © TorqueUI