@ussebastian/kitdigital/docs/components/navigation/pagination.html

Kit Digital de la Universidad San Sebastián

<section>
  <nav class="uss-pagination" aria-label="Page navigation simple">
    <ul class="uss-pagination__list">
      <li class="uss-pagination__item">
        <a href="#" class="uss-pagination__link">1</a>
      </li>
      <li class="uss-pagination__item">
        <a href="#" class="uss-pagination__link">2</a>
      </li>
      <li class="uss-pagination__item">
        <a href="#" class="uss-pagination__link">3</a>
      </li>
      <li class="uss-pagination__item">
        <a href="#" class="uss-pagination__link">4</a>
      </li>
      <li class="uss-pagination__item pagination__item--current">
        <a href="#" class="uss-pagination__link">5</a>
      </li>
      <li class="uss-pagination__item">
        <a href="#" class="uss-pagination__link">6</a>
      </li>
      <li class="uss-pagination__item">
        <a href="#" class="uss-pagination__link">7</a>
      </li>
      <li class="uss-pagination__item">
        <a href="#" class="uss-pagination__link">8</a>
      </li>
      <li class="uss-pagination__item">
        <a href="#" class="uss-pagination__link pagination__link-next">
          <i class="uss-icon ri-arrow-right-line"></i>
        </a>
      </li>
    </ul>
  </nav>
  <nav class="uss-pagination" aria-label="Page navigation with separator">
    <ul class="uss-pagination__list">
      <li class="uss-pagination__item">
        <a href="#" class="uss-pagination__link pagination__link-prev">
          <i class="uss-icon ri-arrow-left-line"></i>
        </a>
      </li>
      <li class="uss-pagination__item">
        <a href="#" class="uss-pagination__link">1</a>
      </li>
      <li class="uss-pagination__item">
        <span class="uss-pagination__link--separator">...</span>
      </li>
      <li class="uss-pagination__item">
        <a href="#" class="uss-pagination__link">6</a>
      </li>
      <li class="uss-pagination__item pagination__item--current">
        <a href="#" class="uss-pagination__link">7</a>
      </li>
      <li class="uss-pagination__item">
        <a href="#" class="uss-pagination__link">8</a>
      </li>

      <li class="uss-pagination__item">
        <span class="uss-pagination__link--separator">...</span>
      </li>
      <li class="uss-pagination__item">
        <a href="#" class="uss-pagination__link">23</a>
      </li>
      <li class="uss-pagination__item">
        <a href="#" class="uss-pagination__link pagination__link-next">
          <i class="uss-icon ri-arrow-right-line"></i>
        </a>
      </li>
    </ul>
  </nav>
  <nav class="uss-pagination" aria-label="Page navigation with disabled prev button control">
    <ul class="uss-pagination__list">
      <li class="uss-pagination__item pagination__link--disabled">
        <a href="#" class="uss-pagination__link pagination__link-prev">
          <i class="uss-icon ri-arrow-left-line"></i>
        </a>
      </li>
      <li class="uss-pagination__item pagination__item--current">
        <a href="#" class="uss-pagination__link">1</a>
      </li>
      <li class="uss-pagination__item">
        <a href="#" class="uss-pagination__link">5</a>
      </li>
      <li class="uss-pagination__item">
        <a href="#" class="uss-pagination__link">6</a>
      </li>
      <li class="uss-pagination__item">
        <a href="#" class="uss-pagination__link">7</a>
      </li>
      <li class="uss-pagination__item">
        <a href="#" class="uss-pagination__link">8</a>
      </li>
      <li class="uss-pagination__item">
        <span class="uss-pagination__link--separator">...</span>
      </li>
      <li class="uss-pagination__item">
        <a href="#" class="uss-pagination__link">23</a>
      </li>
      <li class="uss-pagination__item">
        <a href="#" class="uss-pagination__link pagination__link-next">
          <i class="uss-icon ri-arrow-right-line"></i>
        </a>
      </li>
    </ul>
  </nav>
</section>