Introduction

Stylizer offers you a responsive simple pagination, use the class .pagination inside a ul tag to obtain nice result.

Example :

1 2 3 4

1 2 3 4

Code :

<ul class="pagination">
 <a href="#">1</a>
 <a class="active" href="#">2</a>
 <a href="#">3</a>
 <a href="#">4</a>
</ul>            
          

SCSS

// ---------------------------------------------------------------
// This file contains all styles related to the Pagination component.
// ---------------------------------------------------------------

.pagination {
  display: inline-block;
  a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
    &.active {
      background-color: #576574;
      color: white;
      border: 1px solid #576574;
    }
    &:hover:not(.active) {
      background-color: #ddd;
    }
  }
}