candidate

Pagination

Use this component on content pages to help users to navigate to previous or the next content in the sequence.

It should be placed at the end of the content on the current page.

Open example in new window
HTML 



<nav class="app-pagination" role="navigation" aria-label="Pagination">

    <div class="app-pagination__button app-pagination__button--next">
        <a href="#" class="app-pagination__link" rel="next">
            <span class="app-pagination__link-title">
                <span class="app-pagination__link-label">
                    Next<span class="govuk-visually-hidden"> set of results</span>
                </span>
            </span>

            <span class="app-pagination__link-text">Show next 10 entities</span>

        </a>
    </div>


    <div class="app-pagination__button app-pagination__button--previous">
        <a href="#" class="app-pagination__link" rel="prev">
            <span class="app-pagination__link-title">
                <span class="app-pagination__link-label">
                    Previous<span class="govuk-visually-hidden"> set of results</span>
                </span>
            </span>

            <span class="app-pagination__link-text">Show previous 10 entities</span>

        </a>
    </div>

</nav>
Jinja 
{%- from "design-system/components/pagination/macro.jinja" import appPagination %}

{{ appPagination({
  "prev": {
    "href": "#",
    "text": "Show previous 10 entities"
  },
  "next": {
    "href": "#",
    "text": "Show next 10 entities"
  }
}) }}