carbon-components/html/pagination/pagination.html

The Carbon Design System is IBM’s open-source design system for products and experiences.

<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div class="bx--pagination" data-pagination>
  <div class="bx--pagination__left">
    <label id="select-id-pagination-count-label"
      class="bx--pagination__text"
      for="select-id-pagination-count">
      Items per page:
    </label>
    <div class="bx--select bx--select--inline bx--select__item-count">
      <select class="bx--select-input"
        id="select-id-pagination-count"
        aria-label="Items per page" tabindex="0" data-items-per-page>
        <option class="bx--select-option" value="10">
          10
        </option>
        <option class="bx--select-option" value="20">
          20
        </option>
        <option class="bx--select-option" value="30">
          30
        </option>
        <option class="bx--select-option" value="40">
          40
        </option>
        <option class="bx--select-option" value="50">
          50
        </option>
      </select>
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--select__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg>
    </div>
    <span class="bx--pagination__text">
      <span data-displayed-item-range>1 – 10</span> of
      <span data-total-items>
        40
      </span> items
    </span>
  </div>
  <div class="bx--pagination__right">
    <div class="bx--select bx--select--inline bx--select__page-number">
      <select class="bx--select-input"
        id="select-id-pagination-page"
        aria-label="page number, of 5 pages" tabindex="0" data-page-number-input>
        <option class="bx--select-option" value="1">
          1
        </option>
        <option class="bx--select-option" value="2">
          2
        </option>
        <option class="bx--select-option" value="3">
          3
        </option>
        <option class="bx--select-option" value="4">
          4
        </option>
        <option class="bx--select-option" value="5">
          5
        </option>
      </select>
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--select__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></path></svg>
    </div>
    <label id="select-id-pagination-page-label"
      class="bx--pagination__text"
      for="select-id-pagination-page">
      of 5 pages
    </label>
    <button
      class="bx--pagination__button bx--pagination__button--backward "
      tabindex="0" data-page-backward aria-label="previous page">
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--pagination__nav-arrow" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M20 24L10 16 20 8z"></path></svg>
    </button>
    <button
      class="bx--pagination__button bx--pagination__button--forward "
      tabindex="0" data-page-forward aria-label="next page">
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--pagination__nav-arrow" width="20" height="20" viewBox="0 0 32 32" aria-hidden="true"><path d="M12 8L22 16 12 24z"></path></svg>
    </button>
  </div>
</div>