Pagination

Available since 1.0.0

Pagination is commonly used for tables and tiles. It allows users to see how many pages of content exist, to navigate and highlights which page they are currently viewing.

First Page

When the first page is active, the Back arrow should be disabled.

30 items

<div class="fd-pagination">
  <span class="fd-pagination__total">30 items</span>
  <nav class="fd-pagination__nav">
    <a href="#" class="fd-pagination__link fd-pagination__link--previous" aria-label="Previous"
    aria-disabled="true"></a>
    <a href="#" class="fd-pagination__link" aria-selected="true">1</a>
    <a href="#" class="fd-pagination__link">2</a>
    <a href="#" class="fd-pagination__link">3</a>
    <a href="#" class="fd-pagination__link fd-pagination__link--next" aria-label="Next"
    aria-disabled="false"></a>
  </nav>
</div>

Second Page

30 items

<div class="fd-pagination">
  <span class="fd-pagination__total">30 items</span>
  <nav class="fd-pagination__nav">
    <a href="#" class="fd-pagination__link fd-pagination__link--previous" aria-label="Previous"
    aria-disabled="false"></a>
    <a href="#" class="fd-pagination__link">1</a>
    <a href="#" class="fd-pagination__link" aria-selected="true">2</a>
    <a href="#" class="fd-pagination__link">3</a>
    <a href="#" class="fd-pagination__link fd-pagination__link--next" aria-label="Next"
    aria-disabled="false"></a>
  </nav>
</div>

More than three Pages

500 items

<div class="fd-pagination">
  <span class="fd-pagination__total">500 items</span>
  <nav class="fd-pagination__nav">
    <a href="#" class="fd-pagination__link fd-pagination__link--previous" aria-label="Previous"
    aria-disabled="false"></a>
    <a href="#" class="fd-pagination__link">1</a>
    <a href="#" class="fd-pagination__link" aria-selected="true">2</a>
    <a href="#" class="fd-pagination__link">3</a>
    <span class="fd-pagination__link fd-pagination__link--more" role="presentation"></span>
    <a href="#" class="fd-pagination__link">50</a>
    <a href="#" class="fd-pagination__link fd-pagination__link--next" aria-label="Next"
    aria-disabled="false"></a>
  </nav>
</div>

In between more than three Pages

500 items

<div class="fd-pagination">
  <span class="fd-pagination__total">500 items</span>
  <nav class="fd-pagination__nav">
    <a href="#" class="fd-pagination__link fd-pagination__link--previous" aria-label="Previous"
    aria-disabled="false"></a>
    <a href="#" class="fd-pagination__link">1</a>
    <span class="fd-pagination__link fd-pagination__link--more" role="presentation"></span>
    <a href="#" class="fd-pagination__link">21</a>
    <a href="#" class="fd-pagination__link" aria-selected="true">22</a>
    <a href="#" class="fd-pagination__link">23</a>
    <span class="fd-pagination__link fd-pagination__link--more" role="presentation"></span>
    <a href="#" class="fd-pagination__link">50</a>
    <a href="#" class="fd-pagination__link fd-pagination__link--next" aria-label="Next"
    aria-disabled="false"></a>
  </nav>
</div>

Last Page

On the last page, the Next arrow should be disabled.

500 items

<div class="fd-pagination">
  <span class="fd-pagination__total">500 items</span>
  <nav class="fd-pagination__nav">
    <a href="#" class="fd-pagination__link fd-pagination__link--previous" aria-label="Previous"
    aria-disabled="false"></a>
    <a href="#" class="fd-pagination__link">1</a>
    <span class="fd-pagination__link fd-pagination__link--more" role="presentation"></span>
    <a href="#" class="fd-pagination__link">49</a>
    <a href="#" class="fd-pagination__link" aria-selected="true">50</a>
    <a href="#" class="fd-pagination__link fd-pagination__link--next" aria-label="Next"
    aria-disabled="true"></a>
  </nav>
</div>