AXA Design System Lib Documentation v1.0.0

Pagination indicates a collection of related content divided into multiple pages.

Overview

<nav aria-label="Page navigation example">
  <ul class="pagination text-uppercase h3">
    <li class="page-item"><a class="page-link pe-4" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">...</a></li>
    <li class="page-item"><a class="page-link" href="#">33</a></li>
    <li class="page-item"><a class="page-link" href="#">34</a></li>
    <li class="page-item active" aria-current="page"><a class="page-link" href="#">35</a></li>
    <li class="page-item"><a class="page-link ps-4" href="#">Next</a></li>
  </ul>
</nav>

Working with icons

@AXA specific new class pagination-control-prev-icon and pagination-control-prev-icon

<nav aria-label="Page navigation example">
  <ul class="pagination text-uppercase h3">
    <li class="page-item">
      <a class="page-link pe-4 pagination-control-prev-icon" href="#">
        <span class="visually-hidden">Previous</span>
      </a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">2</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">3</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">4</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">5</a>
    </li>  
    <li class="page-item">
      <a class="page-link" href="#">6</a>
    </li>
    <li class="page-item">
      <a class="page-link" href="#">...</a>
    </li>
    <li class="page-item active" aria-current="page">
      <a class="page-link" href="#">35</a>
    </li>
    <li class="page-item">
      <a class="page-link ps-4 pagination-control-next-icon" href="#">
        <span class="visually-hidden">Next</span>
      </a>
    </li>
  </ul>
</nav>

Disabled and active states

<nav aria-label="Page navigation example">
  <ul class="pagination text-uppercase h3">
    <li class="page-item disabled">
      <a class="page-link pe-4" href="#">Previous</a>
    </li>
    <li class="page-item active" aria-current="page">
      <a class="page-link" href="#">1</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
    <li class="page-item"><a class="page-link" href="#">6</a></li>
    <li class="page-item"><a class="page-link" href="#">...</a></li>
    <li class="page-item"><a class="page-link ps-4" href="#">Next</a></li>
  </ul>
</nav>

<nav aria-label="Page navigation example">
  <ul class="pagination text-uppercase h3">
    <li class="page-item disabled">
      <a class="page-link pe-4 pagination-control-prev-icon" href="#">
        <span class="visually-hidden">Previous</span>
      </a>
    </li>
    <li class="page-item active" aria-current="page">
      <a class="page-link" href="#">1</a>
    </li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">...</a></li>
    <li class="page-item"><a class="page-link" href="#">33</a></li>
    <li class="page-item"><a class="page-link" href="#">34</a></li>
    <li class="page-item"><a class="page-link" href="#">35</a></li>
    <li class="page-item">
      <a class="page-link ps-4 pagination-control-next-icon" href="#">
        <span class="visually-hidden">Next</span>
      </a>
    </li>
  </ul>
</nav>

Documentation

Components