Base

  • Colors
  • Icons
  • Logos
  • Spacing
  • Typography

Components

  • Accordion
  • Avatars
  • Badges
  • Buttons
  • Cards
  • Character Counter
  • Device Type Icons
  • Draggables
  • Dropdowns
  • Droppables
  • Filters
  • Gallery card
  • Indicators
  • Lists
  • Loading
  • Messages
  • Pictogram
  • Poster Play
  • Progress bar
  • QR Code
  • Rating stars
  • Row Selector
  • Sentiment
  • Split View
  • Tables
  • Tags
  • Tester vitals
  • Toast
  • Toggle button
  • Typeahead

Form

  • Checkbox
  • Combobox
  • Form Rule
  • Hint
  • Input
  • Input Title
  • Label
  • Multi-select List
  • Search
  • Select
  • Single-select List
  • Sliders
  • Switch
  • Tabs
  • Text Area

Layout

  • Containers
  • Layers
  • Layout
  • Split Layout
  • Wrappers

Navigation

  • Context Switcher
  • Nav bar
  • Navigation
  • Pagination
  • Sidebar Navigation
  • Step Navigation

Overlay

  • Banners
  • Bulk Selector
  • Modals
  • Popovers
  • Tooltips
  • User Notifications

Patterns

  • Full Page Message

Usertesting-next

  • Cards
  • Colors
  • Segmented Controls
  • Shadows and Elevations
  • Spacing
  • Typography

Visualizations

  • Data Colors

Pagination

Pagination allows customers to navigate between multiple pages worth of items in a single view.

Expand Copy
<nav aria-labelledby="paginated-list">
  <ul class="pagination" id="paginated-list">
    <li class="pagination__item">
      <a aria-label="Jump to the first page" class="pagination__text" href="#">First</a>
    </li>
    <li class="pagination__item">
      <a rel="prev" aria-label="Go to the previous page" class="pagination__text pagination__text--prev" href="#">Prev</a>
    </li>
    <li class="pagination__item pagination__item--current">1</li>
    <li class="pagination__item">
      <a class="pagination__link" rel="next" aria-label="Page 2" href="#">2</a>
    </li>
    <li class="pagination__item">
      <a class="pagination__link" aria-label="Page 3" href="#">3</a>
    </li>
    <li class="pagination__item">
      <a class="pagination__link" aria-label="Page 4" href="#">4</a>
    </li>
    <li class="pagination__item pagination__gap">…</span>
    <li class="pagination__item">
      <a class="pagination__text pagination__text--next" rel="next" aria-label="Go to the next page" href="#">Next</a>
    </li>
    <li class="pagination__item">
      <a class="pagination__text" aria-label="Jump to the last page" href="#">Last</a>
    </li>
  </ul>
</nav>

Description

In most cases we opt for an infinite scroll pattern but for dense tabular data we opt for pagination. This keeps the user oriented on how to navigate such data.

The pagination markup is generated by the Kaminari plugin.

Usage

Do

  • Keep the amount of pages clear and concise
  • Truncate results after five items
  • Use First Prev Next Last as action labels

Don't

  • Truncate for fewer than 3 pages
  • Use truncation when infinite scrolling can be used

Accessibility

  • Receives :focus

  • Link content should be available to screen readers