City of Ghent Style Guide

Pagination

When to use this component

Use pagination to divide the content on overview pages with a big amount of content into multiple pages.

When using pagination, the pagination component shows the number of pages, the current page and links to all other pages, in particular the first page, the last page, the previous page and the next page. The pagination component is used on overview pages and on filter pages.

When not to use this component

Do not use the pagination component (or hide it) when the content on a overview pages is not divided or does not need to be divided into multiple pages.

Do not use the pagination component on detail pages.

In general, do not use the pagination component for other uses than pagination.

How it works

The pagination component consists of the following required elements:

  • Indication of the current page.
  • Link to the first page.
  • Link to the previous page.
  • Link to the next page.
  • Link to the last page.
  • An ellipsis between the link to the previouw page and the link to the the first available next page number.
  • An ellipsis between the link to the next page and the link to the first available previous page number.

Depending on the available width, the number of pages and what the current page is at a certain point, the elements are shown or hidden in a certain way. See the examples for more context.

<nav class="pager" aria-labelledby="pagination_1-{{ total ~ active }}">
  <h2 id="pagination_1-{{ total ~ active }}" class="visually-hidden">Pagination</h2>
  {% apply spaceless %}
    <ul class="pager__items">

      {% if 1 != active %}
        <li class="previous">
          <a href="#" class="standalone-link back">
            Previous
            <span class="visually-hidden">page</span>
          </a>
        </li>
      {% endif %}

      {% if 1 == active %}
        <li class="active">
          <span class="visually-hidden">Page</span>
          {{ 1 }}
        </li>
      {% else %}
        <li>
          <a href="#" title="Go to page {{ 1 }}">
            <span class="visually-hidden">Page</span>
            {{ 1 }}
          </a>
        </li>
      {% endif %}

      {% if active > 3 %}
        <li class="spacing">...</li>
      {% endif %}

      {% if active-1 > 1 and active-1 != total %}
        <li class="prev--number">
          <a href="#" title="Go to page {{ active-1 }}">
            <span class="visually-hidden">Page</span>
            {{ active-1 }}
          </a>
        </li>
      {% endif %}

      {% if active != 1 and active != total %}
        <li class="active">
          <span class="visually-hidden">Page</span>
          {{ active }}
        </li>
      {% endif %}

      {% if active+1 < total %}
        <li class="next--number">
          <a href="#" title="Go to page {{ active+1 }}">
            <span class="visually-hidden">Page</span>
            {{ active+1 }}
          </a>
        </li>
      {% endif %}

      {% if total - active > 2 %}
        <li class="spacing">...</li>
      {% endif %}

      {% if total == active %}
        <li class="active">
          <span class="visually-hidden">Page</span>
          {{ total }}
        </li>
      {% else %}
        <li>
          <a href="#" title="Go to page {{ total }}">
            <span class="visually-hidden">Page</span>
            {{ total }}
          </a>
        </li>
      {% endif %}

      {% if total != active %}
        <li class="next">
          <a href="#" class="standalone-link">
            Next
            <span class="visually-hidden">page</span>
          </a>
        </li>
      {% endif %}
    </ul>
  {% endapply %}
</nav>
<nav class="pager" aria-labelledby="pagination_1-32">
    <h2 id="pagination_1-32" class="visually-hidden">Pagination</h2>
    <ul class="pager__items">
        <li class="previous"><a href="#" class="standalone-link back">
                Previous
                <span class="visually-hidden">page</span></a></li>
        <li><a href="#" title="Go to page 1"><span class="visually-hidden">Page</span>
                1
            </a></li>
        <li class="active"><span class="visually-hidden">Page</span>
            2
        </li>
        <li><a href="#" title="Go to page 3"><span class="visually-hidden">Page</span>
                3
            </a></li>
        <li class="next"><a href="#" class="standalone-link">
                Next
                <span class="visually-hidden">page</span></a></li>
    </ul>
</nav>
{
  "total": 3,
  "active": 2
}
  • Content:
    .pager {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    
      @include tablet {
        justify-content: flex-end;
      }
    
      ul {
        display: flex;
        flex: 1;
        flex-basis: 100%;
        align-items: center;
        justify-content: center;
        margin: 0;
        list-style: none;
    
        @include tablet {
          flex-basis: auto;
          justify-content: flex-start;
        }
    
        li {
          @include theme('border-color', 'color-none');
    
          display: flex;
          flex: 0 0 auto;
          justify-content: center;
          min-width: 32px;
          padding-right: 7px;
          padding-left: 7px;
          border: 2px solid;
          font-size: .9rem;
          line-height: 32px;
          text-align: center;
    
          &.spacing {
            padding: 0 10px 10px;
            line-height: 1;
          }
    
          &.active {
            @include theme('border-color', 'color-zero', 'pagination-active-color');
            @include semi-bold-text;
    
            padding-right: 10px;
            padding-left: 10px;
            border-bottom: 2px solid;
          }
        }
    
        a {
          @include theme('color', 'color-zero', 'default-text-color');
          @include theme('border-color', 'color-none');
          @include semi-bold-text;
    
          display: block;
          padding: 2px 10px 0;
          border-bottom: 2px solid;
          background-image: linear-gradient(to bottom,
            color('yellow') 0,
            color('yellow') 100%);
          font-size: inherit;
          line-height: inherit;
          text-decoration: none;
    
          &:focus,
          &:focus-within,
          &:focus-visible,
          &:hover {
            @include theme('color', 'color-zero', 'default-text-color');
          }
    
          &:focus,
          &:focus-visible {
            height: 36px;
            border-bottom: 0;
            outline: 0;
            box-shadow: inset 0 0 0 2px color('gray');
          }
    
          &.standalone-link {
            &:focus,
            &:focus-within,
            &:focus-visible,
            &:hover {
              @include theme('color', 'color-zero', 'pagination-active-color');
              @include theme('border-bottom-color', 'color-zero');
            }
          }
        }
    
    
        .previous,
        .next {
          display: none;
    
          @include tablet {
            display: flex;
          }
    
          a {
            padding-right: 0;
    
            &::after {
              position: absolute;
              top: 0;
              bottom: 0;
              height: 24px;
              margin-top: auto;
              margin-bottom: auto;
            }
          }
        }
    
        .previous {
          a {
            margin-right: 0;
          }
        }
    
        .next {
          margin: 0 0 10px;
    
          a {
            margin-left: 0;
    
            &::after {
              right: -36px;
            }
          }
        }
      }
    
      .button {
        margin: 20px 0;
      }
    }
    
  • URL: /components/raw/pagination/_pagination.scss
  • Filesystem Path: components/31-molecules/pagination/_pagination.scss
  • Size: 2.6 KB