Pager

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

Pager

Pager component

<button class="button-icon button left" type="submit"><i class="fa fa-arrow-left"></i>Prev</button>
<button class="button-icon button right" type="submit">Next<i class="fa fa-arrow-right"></i></button>
<button class="button-icon button-primary left" type="submit"><i class="fa fa-arrow-left"></i>Previous</button>
<button class="button-icon button-primary right" type="submit">Next<i class="fa fa-arrow-right"></i></button>

Page group

<div class="pager-group">
    <button class="button-icon button left" type="submit"><i class="fa fa-arrow-left"></i>Previous</button>
    <button class="button-icon button right" type="submit">Next<i class="fa fa-arrow-right"></i></button>
</div>
<div class="pager-group">
    <button class="button-icon button-primary left" type="submit"><i class="fa fa-arrow-left"></i>Previous</button>
    <button class="button-icon button-primary right" type="submit">Next<i class="fa fa-arrow-right"></i></button>
</div>

Pager sizes

<button class="button-icon button left large" type="submit"><i class="fa fa-arrow-left"></i>Previous</button>
<button class="button-icon button right large" type="submit">Next<i class="fa fa-arrow-right"></i></button>
<div class="pager-group large">
    <button class="button-icon button left" type="submit"><i class="fa fa-arrow-left"></i>Previous</button>
    <button class="button-icon button right" type="submit">Next<i class="fa fa-arrow-right"></i></button>
</div>
<button class="button-icon button left default" type="submit"><i class="fa fa-arrow-left"></i>Previous</button>
<button class="button-icon button right default" type="submit">Next<i class="fa fa-arrow-right"></i></button>
<div class="pager-group default">
    <button class="button-icon button left" type="submit"><i class="fa fa-arrow-left"></i>Previous</button>
    <button class="button-icon button right" type="submit">Next<i class="fa fa-arrow-right"></i></button>
</div>
<button class="button-icon button left small" type="submit"><i class="fa fa-arrow-left"></i>Previous</button>
<button class="button-icon button right small" type="submit">Next<i class="fa fa-arrow-right"></i></button>
<div class="pager-group small">
    <button class="button-icon button left" type="submit"><i class="fa fa-arrow-left"></i>Previous</button>
    <button class="button-icon button right" type="submit">Next<i class="fa fa-arrow-right"></i></button>
</div>
<button class="button-icon button left xsmall" type="submit"><i class="fa fa-arrow-left"></i>Previous</button>
<button class="button-icon button right xsmall" type="submit">Next<i class="fa fa-arrow-right"></i></button>
<div class="pager-group xsmall">
    <button class="button-icon button left" type="submit"><i class="fa fa-arrow-left"></i>Previous</button>
    <button class="button-icon button right" type="submit">Next<i class="fa fa-arrow-right"></i></button>
</div>
  • © TorqueUI