پیشفرض

<div class="paginating-container pagination-default">
    <ul class="pagination">
        <li class="prev"><a href="javascript:void(0);">قبلی</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);">بعدی</a></li>
    </ul>
</div>

صاف

<div class="paginating-container pagination-solid">
    <ul class="pagination">
        <li class="prev"><a href="javascript:void(0);">قبلی</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);">بعدی</a></li>
    </ul>
</div>

با آیکون

<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>

بدون فاصله

<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>

جامد سفارشی

<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>

سفارشی خارج از خط

<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>