Skip to main content

Pagination

Default#


<ul class="pagination">  <li class="pagination__item disabled">    <a class="pagination__link" href="#url">      «    </a>  </li>  <li class="pagination__item">    <a class="pagination__link" href="#url">      1    </a>  </li>  <li class="pagination__item pagination__item--active">    <a class="pagination__link" href="#url">      2    </a>  </li>  <li class="pagination__item">    <a class="pagination__link" href="#url">      3    </a>  </li>  <li class="pagination__item">    <span>...</span>  </li>  <li class="pagination__item">    <a class="pagination__link" href="#url">      »    </a>  </li></ul>

Small#


<ul class="pagination pagination--sm">  <li class="pagination__item">    <a class="pagination__link" href="#url">      «    </a>  </li>  <li class="pagination__item">    <span>...</span>  </li>  <li class="pagination__item">    <a class="pagination__link" href="#url">      5    </a>  </li>  <li class="pagination__item pagination__item--active">    <a class="pagination__link" href="#url">      6    </a>  </li>  <li class="pagination__item">    <a class="pagination__link" href="#url">      7    </a>  </li>  <li class="pagination__item">    <span>...</span>  </li>  <li class="pagination__item">    <a class="pagination__link" href="#url">      »    </a>  </li></ul>

Large#


<ul class="pagination pagination--lg">  <li class="pagination__item">    <a class="pagination__link" href="#url">      «    </a>  </li>  <li class="pagination__item">    <span>...</span>  </li>  <li class="pagination__item">    <a class="pagination__link" href="#url">      7    </a>  </li>  <li class="pagination__item">    <a class="pagination__link" href="#url">      8    </a>  </li>  <li class="pagination__item pagination__item--active">    <a class="pagination__link" href="#url">      9    </a>  </li>  <li class="pagination__item disabled">    <a class="pagination__link" href="#url">      »    </a>  </li></ul>