Sections

Content

Layout

Navigation

Pagination

Available on pages that support the {{pagination}} helper, this pattern allows visitors to navigate between pages of content.

The markup is generated using the {{pagination}} helper which is available on the following pages:

  • Home page
  • Article page
  • Contributions page
  • Request List page
  • Search Results page
  • Section page

Our themes have the pagination links (.pagination-next-link, .pagination-prev-link, .pagination-first-link and .pagination-last-link) inherit outline button styling by default.

You can edit the pagination styles directly in the theme’s style.css file or through the _pagination.scss Sass partial to give the links a different appearance.

For example, you could apply the primary button style:

Links styled as primary buttons 
  • .pagination {

  &-prev,
  &-first,
  &-last {

    &-link {
      @extend .button;
      @extend .button-outline-primary;
    }
  }
}