carbon-components/html/pagination-nav/pagination-nav--default--as-anchor.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.
-->

<nav class="bx--pagination-nav" aria-label="pagination" data-pagination-nav>
  <ul class="bx--pagination-nav__list">
      <li class="bx--pagination-nav__list-item">
          <a
            class="bx--pagination-nav__page bx--pagination-nav__page--direction bx--pagination-nav__page--disabled"
            data-page-previous
            href="javascript:void(0)"
              aria-disabled="true"
          >
          <span class="bx--pagination-nav__accessibility-label">Previous page </span>
          <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--pagination-nav__icon" width="5" height="8" viewBox="0 0 5 8" aria-hidden="true"><path d="M5 8L0 4 5 0z"></path></svg>
          </a>
      </li>
      <li class="bx--pagination-nav__list-item">
            <a
              class="bx--pagination-nav__page bx--pagination-nav__page--active bx--pagination-nav__page--disabled"
              data-page="1"
              data-page-button
              href="javascript:void(0)"
                data-page-active="true"
                aria-current="page"
                aria-disabled="true"
            >
            <span class="bx--pagination-nav__accessibility-label">page </span>1
            </a>
      </li>
      <li class="bx--pagination-nav__list-item">
            <a
              class="bx--pagination-nav__page"
              data-page="2"
              data-page-button
              href="javascript:void(0)"
            >
            <span class="bx--pagination-nav__accessibility-label">page </span>2
            </a>
      </li>
      <li class="bx--pagination-nav__list-item">
            <a
              class="bx--pagination-nav__page"
              data-page="3"
              data-page-button
              href="javascript:void(0)"
            >
            <span class="bx--pagination-nav__accessibility-label">page </span>3
            </a>
      </li>
      <li class="bx--pagination-nav__list-item">
            <a
              class="bx--pagination-nav__page"
              data-page="4"
              data-page-button
              href="javascript:void(0)"
            >
            <span class="bx--pagination-nav__accessibility-label">page </span>4
            </a>
      </li>
      <li class="bx--pagination-nav__list-item">
            <a
              class="bx--pagination-nav__page"
              data-page="5"
              data-page-button
              href="javascript:void(0)"
            >
            <span class="bx--pagination-nav__accessibility-label">page </span>5
            </a>
      </li>
      <li class="bx--pagination-nav__list-item">
          <a
            class="bx--pagination-nav__page bx--pagination-nav__page--direction"
            data-page-next
            href="javascript:void(0)"
          >
          <span class="bx--pagination-nav__accessibility-label">Next page </span>
          <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bx--pagination-nav__icon" width="5" height="8" viewBox="0 0 5 8" aria-hidden="true"><path d="M0 0L5 4 0 8z"></path></svg>
          </a>
      </li>
  </ul>
</nav>