Default
<div class="paginating-container pagination-default">
<ul class="pagination">
<li class="prev"><a href="javascript:void(0);">Prev</a></li>
<li><a href="javascript:void(0);">1</a></li>
<li class="active"><a href="javascript:void(0);">2</a></li>
<li><a href="javascript:void(0);">3</a></li>
<li class="next"><a href="javascript:void(0);">Next</a></li>
</ul>
</div>
Solid
<div class="paginating-container pagination-solid">
<ul class="pagination">
<li class="prev"><a href="javascript:void(0);">Prev</a></li>
<li><a href="javascript:void(0);">1</a></li>
<li class="active"><a href="javascript:void(0);">2</a></li>
<li><a href="javascript:void(0);">3</a></li>
<li class="next"><a href="javascript:void(0);">Next</a></li>
</ul>
</div>
With Icons
<div class="paginating-container pagination-solid">
<ul class="pagination">
<li class="prev"><a href="javascript:void(0);"><svg> ... </svg></a></li>
<li><a href="javascript:void(0);">1</a></li>
<li class="active"><a href="javascript:void(0);">2</a></li>
<li><a href="javascript:void(0);">3</a></li>
<li class="next"><a href="javascript:void(0);"><svg> ... </svg></a></li>
</ul>
</div>
No Spacing
<div class="pagination-no_spacing">
<ul class="pagination">
<li><a href="javascript:void(0);" class="prev"><svg> ... </svg></a></li>
<li><a href="javascript:void(0);">1</a></li>
<li><a href="javascript:void(0);" class="active">2</a></li>
<li><a href="javascript:void(0);">3</a></li>
<li><a href="javascript:void(0);" class="next"><svg> ... </svg></a></li>
</ul>
</div>
Custom Solid
<div class="pagination-custom_solid">
<a href="javascript:void(0);" class="prev"><svg> ... </svg></a>
<ul class="pagination">
<li><a href="javascript:void(0);">1</a></li>
<li><a href="javascript:void(0);" class="active">2</a></li>
<li><a href="javascript:void(0);">3</a></li>
</ul>
<a href="javascript:void(0);" class="next"><svg> ... </svg></a>
</div>
Custom Outline
<div class="pagination-custom_outline">
<a href="javascript:void(0);" class="prev"><svg> ... </svg></a>
<ul class="pagination">
<li><a href="javascript:void(0);">1</a></li>
<li class="active"><a href="javascript:void(0);">2</a></li>
<li><a href="javascript:void(0);">3</a></li>
</ul>
<a href="javascript:void(0);" class="next"><svg> ... </svg></a>
</div>
Copyright © 2024 DesignReset, All rights reserved.
Coded with