User Manual

Pagination

A component used to navigate between pages of the same content. It contains two navigation arrow elements which indicate navigation between the previous and next page, based on the current active page. On desktop there are not more than five pages shown, while on mobile this is reduced to three.

Default


    
      

  

<div class="m-pagination">
  <a class="m-pagination__prev is-disabled" href=""></a>

  <ul class="m-pagination__list">
    

      <li class="m-pagination__item is-active">
        <a class="m-pagination__link" href="">1</a>
      </li>

    

      <li class="m-pagination__item ">
        <a class="m-pagination__link" href="">2</a>
      </li>

    

      <li class="m-pagination__item ">
        <a class="m-pagination__link" href="">3</a>
      </li>

    
  </ul>

  <a class="m-pagination__next" href=""></a>
</div>

States

  • is-active

    Indicate if an item/number representing a page is active. The number will get a blue background-color in the form of a circle and the color will turn white. DO NOTE that this is only used on the m-pagination__item elements.

  • is-disabled

    Used on the navigation arrow elements to indicate if they are clickable. If the first page is active, then the pervious arrow is disabled. When the last page is active, the next arrow is disabled. DO NOTE that this is only used on the m-pagination__prev and m-pagination__next elements.