FEC Pattern Library

Feed pagination

Feeds or lists of items are split into multiple pages because very long collections are more than a user can scan or comprehend.

Feed pagination controls allow users to know how many pages of items exist. They allow users to navigate forward and backward one page at a time, and to always be able to select the first and last page from the list.

When to use

  • In combination with feeds, lists, or chart table components, when the number of items is countable without making the page less performant

When to consider something else

  • When the number of items is not easily counted without impacting performance, such as in a data table or legal resource table, use data pagination

Status

This component is not currently in use on the site, but the styles have been coded and it is ready to try out in usability testing.

<div class="container" style="padding: 2rem">
    <div class="dataTables_paginate paging_simple_numbers" id="results_paginate">
        <div class="results-info">
            <a class="paginate_button previous">Previous</a>
            <span>
                <a class="paginate_button">1</a>
                <a class="paginate_button">2</a>
                <a class="paginate_button current">3</a>
                <a class="paginate_button">4</a>
                <a class="paginate_button">5</a>
                <span class="ellipsis">…</span>
                <a class="paginate_button">24</a>
            </span>
            <a class="paginate_button next">Next</a>
            <div class="u-float-right t-sans">Showing
                <span class="js-page-info">1-10 of 240</span> entries
            </div>
        </div>
    </div>
</div>
 
<div class="container" style="padding: 2rem">
  <div class="dataTables_paginate paging_simple_numbers" id="results_paginate">
    <div class="results-info">
      <a class="paginate_button previous">Previous</a>
      <span>
        <a class="paginate_button">1</a>
        <a class="paginate_button">2</a>
        <a class="paginate_button current">3</a>
        <a class="paginate_button">4</a>
        <a class="paginate_button">5</a>
        <span class="ellipsis">…</span>
        <a class="paginate_button">24</a>
      </span>
      <a class="paginate_button next">Next</a>
      <div class="u-float-right t-sans">Showing
        <span class="js-page-info">1-10 of 240</span> entries
      </div>
    </div>
  </div>
</div>
 
/* No context defined. */
  • Handle: @feed-pagination
  • Preview:
  • Filesystem Path: components/02-components/pagination/02-feed-pagination/feed-pagination.html