This website requires JavaScript to deliver the best possible experience.

Pagination

    <div class="pagination">
      <button class="pagination-first">
        <svg id="icon-arrowPrev" viewbox="0 0 24 24" class="icon">
          <path d="M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z"></path>
        </svg>
      </button>
      <button class="pagination-prev">
        <svg id="icon-arrowPrev" viewbox="0 0 24 24" class="icon">
          <path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"></path>
        </svg>
      </button>
      <button class="pagination-item">7</button>
      <button class="pagination-item is-active"> 8</button>
      <button class="pagination-item">9</button>
      <button class="pagination-next">
        <svg id="icon-arrowNext" viewbox="0 0 24 24" class="icon">
          <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
        </svg>
      </button>
      <button class="pagination-last">
        <svg id="icon-arrowNext" viewbox="0 0 24 24" class="icon">
          <path d="M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z"></path>
        </svg>
      </button>
    </div>
    .pagination
      button.pagination-first
        svg#icon-arrowPrev.icon(viewbox='0 0 24 24')
          path(d='M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z')
      button.pagination-prev
        svg#icon-arrowPrev.icon(viewbox='0 0 24 24')
          path(d='M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z')
      button.pagination-item 7
      button.pagination-item.is-active  8
      button.pagination-item 9
      button.pagination-next
        svg#icon-arrowNext.icon(viewbox='0 0 24 24')
          path(d='M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z')
      button.pagination-last
        svg#icon-arrowNext.icon(viewbox='0 0 24 24')
          path(d='M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z')
      <div class="pagination is-tiny">
        <button class="pagination-first">
          <svg id="icon-arrowPrev" viewbox="0 0 24 24" class="icon">
            <path d="M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z"></path>
          </svg>
        </button>
        <button class="pagination-prev">
          <svg id="icon-arrowPrev" viewbox="0 0 24 24" class="icon">
            <path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"></path>
          </svg>
        </button>
        <button class="pagination-item">7</button>
        <button class="pagination-item is-active"> 8</button>
        <button class="pagination-item">9</button>
        <button class="pagination-next">
          <svg id="icon-arrowNext" viewbox="0 0 24 24" class="icon">
            <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
          </svg>
        </button>
        <button class="pagination-last">
          <svg id="icon-arrowNext" viewbox="0 0 24 24" class="icon">
            <path d="M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z"></path>
          </svg>
        </button>
      </div>
      
      <div class="pagination is-small">
        <button class="pagination-first">
          <svg id="icon-arrowPrev" viewbox="0 0 24 24" class="icon">
            <path d="M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z"></path>
          </svg>
        </button>
        <button class="pagination-prev">
          <svg id="icon-arrowPrev" viewbox="0 0 24 24" class="icon">
            <path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"></path>
          </svg>
        </button>
        <button class="pagination-item">7</button>
        <button class="pagination-item is-active"> 8</button>
        <button class="pagination-item">9</button>
        <button class="pagination-next">
          <svg id="icon-arrowNext" viewbox="0 0 24 24" class="icon">
            <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
          </svg>
        </button>
        <button class="pagination-last">
          <svg id="icon-arrowNext" viewbox="0 0 24 24" class="icon">
            <path d="M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z"></path>
          </svg>
        </button>
      </div>
      
      <div class="pagination is-normal">
        <button class="pagination-first">
          <svg id="icon-arrowPrev" viewbox="0 0 24 24" class="icon">
            <path d="M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z"></path>
          </svg>
        </button>
        <button class="pagination-prev">
          <svg id="icon-arrowPrev" viewbox="0 0 24 24" class="icon">
            <path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"></path>
          </svg>
        </button>
        <button class="pagination-item">7</button>
        <button class="pagination-item is-active"> 8</button>
        <button class="pagination-item">9</button>
        <button class="pagination-next">
          <svg id="icon-arrowNext" viewbox="0 0 24 24" class="icon">
            <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
          </svg>
        </button>
        <button class="pagination-last">
          <svg id="icon-arrowNext" viewbox="0 0 24 24" class="icon">
            <path d="M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z"></path>
          </svg>
        </button>
      </div>
      
      <div class="pagination is-large">
        <button class="pagination-first">
          <svg id="icon-arrowPrev" viewbox="0 0 24 24" class="icon">
            <path d="M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z"></path>
          </svg>
        </button>
        <button class="pagination-prev">
          <svg id="icon-arrowPrev" viewbox="0 0 24 24" class="icon">
            <path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"></path>
          </svg>
        </button>
        <button class="pagination-item">7</button>
        <button class="pagination-item is-active"> 8</button>
        <button class="pagination-item">9</button>
        <button class="pagination-next">
          <svg id="icon-arrowNext" viewbox="0 0 24 24" class="icon">
            <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
          </svg>
        </button>
        <button class="pagination-last">
          <svg id="icon-arrowNext" viewbox="0 0 24 24" class="icon">
            <path d="M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z"></path>
          </svg>
        </button>
      </div>
      
      <div class="pagination is-massive">
        <button class="pagination-first">
          <svg id="icon-arrowPrev" viewbox="0 0 24 24" class="icon">
            <path d="M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z"></path>
          </svg>
        </button>
        <button class="pagination-prev">
          <svg id="icon-arrowPrev" viewbox="0 0 24 24" class="icon">
            <path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"></path>
          </svg>
        </button>
        <button class="pagination-item">7</button>
        <button class="pagination-item is-active"> 8</button>
        <button class="pagination-item">9</button>
        <button class="pagination-next">
          <svg id="icon-arrowNext" viewbox="0 0 24 24" class="icon">
            <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
          </svg>
        </button>
        <button class="pagination-last">
          <svg id="icon-arrowNext" viewbox="0 0 24 24" class="icon">
            <path d="M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z"></path>
          </svg>
        </button>
      </div>
      .pagination.is-tiny
        button.pagination-first
          svg#icon-arrowPrev.icon(viewbox='0 0 24 24')
            path(d='M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z')
        button.pagination-prev
          svg#icon-arrowPrev.icon(viewbox='0 0 24 24')
            path(d='M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z')
        button.pagination-item 7
        button.pagination-item.is-active  8
        button.pagination-item 9
        button.pagination-next
          svg#icon-arrowNext.icon(viewbox='0 0 24 24')
            path(d='M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z')
        button.pagination-last
          svg#icon-arrowNext.icon(viewbox='0 0 24 24')
            path(d='M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z')
      
      
      .pagination.is-small
        button.pagination-first
          svg#icon-arrowPrev.icon(viewbox='0 0 24 24')
            path(d='M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z')
        button.pagination-prev
          svg#icon-arrowPrev.icon(viewbox='0 0 24 24')
            path(d='M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z')
        button.pagination-item 7
        button.pagination-item.is-active  8
        button.pagination-item 9
        button.pagination-next
          svg#icon-arrowNext.icon(viewbox='0 0 24 24')
            path(d='M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z')
        button.pagination-last
          svg#icon-arrowNext.icon(viewbox='0 0 24 24')
            path(d='M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z')
      
      
      .pagination.is-normal
        button.pagination-first
          svg#icon-arrowPrev.icon(viewbox='0 0 24 24')
            path(d='M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z')
        button.pagination-prev
          svg#icon-arrowPrev.icon(viewbox='0 0 24 24')
            path(d='M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z')
        button.pagination-item 7
        button.pagination-item.is-active  8
        button.pagination-item 9
        button.pagination-next
          svg#icon-arrowNext.icon(viewbox='0 0 24 24')
            path(d='M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z')
        button.pagination-last
          svg#icon-arrowNext.icon(viewbox='0 0 24 24')
            path(d='M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z')
      
      .pagination.is-large
        button.pagination-first
          svg#icon-arrowPrev.icon(viewbox='0 0 24 24')
            path(d='M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z')
        button.pagination-prev
          svg#icon-arrowPrev.icon(viewbox='0 0 24 24')
            path(d='M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z')
        button.pagination-item 7
        button.pagination-item.is-active  8
        button.pagination-item 9
        button.pagination-next
          svg#icon-arrowNext.icon(viewbox='0 0 24 24')
            path(d='M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z')
        button.pagination-last
          svg#icon-arrowNext.icon(viewbox='0 0 24 24')
            path(d='M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z')
      
      
      .pagination.is-massive
        button.pagination-first
          svg#icon-arrowPrev.icon(viewbox='0 0 24 24')
            path(d='M18.41,7.41L17,6L11,12L17,18L18.41,16.59L13.83,12L18.41,7.41M12.41,7.41L11,6L5,12L11,18L12.41,16.59L7.83,12L12.41,7.41Z')
        button.pagination-prev
          svg#icon-arrowPrev.icon(viewbox='0 0 24 24')
            path(d='M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z')
        button.pagination-item 7
        button.pagination-item.is-active  8
        button.pagination-item 9
        button.pagination-next
          svg#icon-arrowNext.icon(viewbox='0 0 24 24')
            path(d='M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z')
        button.pagination-last
          svg#icon-arrowNext.icon(viewbox='0 0 24 24')
            path(d='M5.59,7.41L7,6L13,12L7,18L5.59,16.59L10.17,12L5.59,7.41M11.59,7.41L13,6L19,12L13,18L11.59,16.59L16.17,12L11.59,7.41Z')
      ModifierDescriptionValue
      Sizechanges the element size based on font-size

      .is-tiny

      .is-small

      .is-normal

      .is-large

      .is-massive