Tornado Logo

Pagination - Tornado UI v2

pagination is components that shows a series of page numbers to navigate your website pages.

Sass Customize

in order to edit the Pagination you can use the css classes to overide the theme or you can edit it with sass Tornado Folder/SCSS/elements/_pagination.scss and do not forget to compile the main files of the framework Tornado Folder/SCSS/tornado.scss and tornado-rtl.scss.

Standard Pagination

in order to create a pagination with tornado all you have to do is create ul list with class name pagination then list your pages link inside li tag and for the activated page or the current page add a class name active or current to the pagination li tag watch the example below

<!-- Pagination -->
<ul class="pagination">
    <li><a href="#" class="ti-arrow-left-c"></a></li>
    <li class="active"><a href="#">01</a></li>
    <li><a href="#">02</a></li>
    <li><a href="#">03</a></li>
    <li><a href="#">04</a></li>
    <li><a href="#">05</a></li>
    <li><a href="#">06</a></li>
    <li><a href="#">07</a></li>
    <li><a href="#">08</a></li>
    <li><a href="#">09</a></li>
    <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
    <li><a href="#" class="ti-arrow-right-c"></a></li>
</ul>

Separate Buttons

if you want your pagination to be like buttons separated with gutter space add class name separate to the pagination ul

<!-- Pagination -->
<ul class="pagination separate">
    <li><a href="#" class="ti-arrow-left-c"></a></li>
    <li class="active"><a href="#">01</a></li>
    <li><a href="#">02</a></li>
    <li><a href="#">03</a></li>
    <li><a href="#">04</a></li>
    <li><a href="#">05</a></li>
    <li><a href="#">06</a></li>
    <li><a href="#">07</a></li>
    <li><a href="#">08</a></li>
    <li><a href="#">09</a></li>
    <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
    <li><a href="#" class="ti-arrow-right-c"></a></li>
</ul>

Circled Pagination

circled pagination show the pagintion items buttons in shape of circle button you can activate this theme by adding class name circles to the pagination ul

<!-- Pagination -->
<ul class="pagination circles">
    <li><a href="#" class="ti-arrow-left-c"></a></li>
    <li class="active"><a href="#">01</a></li>
    <li><a href="#">02</a></li>
    <li><a href="#">03</a></li>
    <li><a href="#">04</a></li>
    <li><a href="#">05</a></li>
    <li><a href="#">06</a></li>
    <li><a href="#">07</a></li>
    <li><a href="#">08</a></li>
    <li><a href="#">09</a></li>
    <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
    <li><a href="#" class="ti-arrow-right-c"></a></li>
</ul>

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.