City of Ghent Style Guide - Version 2.10.0

Pagination: State 2 

<nav class="pager">
    <ul class="pager__items">
        <li class="pager__item pager__item--first">
            <a href="#" title="Go to the first page" rel="first">« first</a>
        </li>
        <li class="pager__item pager__item--prev">
            <a href="#" title="Go to the previous page">‹ previous</a>
        </li>
        <li class="pager__item pager__item--ellipsis" role="presentation">
            …
        </li>
        <li class="pager__item">
            <a href="#" title="Current page">5</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 6">6</a>
        </li>
        <li class="pager__item is-active">
            <a href="#" title="Go to page 7">7</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 8">8</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 9">9</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 10">10</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 11">11</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 12">12</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 13">13</a>
        </li>
        <li class="pager__item pager__item--ellipsis" role="presentation">
            …
        </li>
        <li class="pager__item pager__item--next">
            <a href="#" title="Go to the next page" rel="next">next ›</a>
        </li>
        <li class="pager__item pager__item--last">
            <a href="#" title="Go to the last page" rel="last">last »</a>
        </li>
    </ul>
</nav>
 
<nav class="pager">
    <ul class="pager__items">
        <li class="pager__item pager__item--first">
            <a href="#" title="Go to the first page" rel="first">« first</a>
        </li>
        <li class="pager__item pager__item--prev">
            <a href="#" title="Go to the previous page">‹ previous</a>
        </li>
        <li class="pager__item pager__item--ellipsis" role="presentation">
          …
        </li>
        <li class="pager__item">
            <a href="#" title="Current page">5</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 6">6</a>
        </li>
        <li class="pager__item is-active">
            <a href="#" title="Go to page 7">7</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 8">8</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 9">9</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 10">10</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 11">11</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 12">12</a>
        </li>
        <li class="pager__item">
            <a href="#" title="Go to page 13">13</a>
        </li>
        <li class="pager__item pager__item--ellipsis" role="presentation">
          …
        </li>
        <li class="pager__item pager__item--next">
            <a href="#" title="Go to the next page" rel="next">next ›</a>
        </li>
        <li class="pager__item pager__item--last">
            <a href="#" title="Go to the last page" rel="last">last »</a>
        </li>
    </ul>
</nav>
 
/* No context defined for this component. */
  • Content: 
    //
// Pagination
//
.pager {
  ul {
    @extend %list-no-style;
    font-size: .8rem;
    font-weight: bold;

    li {
      display: inline;
      margin-left: .25rem;

      a,
      span {
        display: inline-block;
        padding: .4rem .5rem;
        border-radius: $radius-1;
        text-decoration: none;

        &:hover,
        &:focus,
        &:active {
          background-color: $color-lightest-blue;
        }
      }

      &.is-active {
        span,
        a {
          background-color: $color-orange;
          color: $color-white;
        }
      }

      &.pager-ellipsis {
        &:hover,
        &:focus,
        &:active {
          background-color: transparent;
        }
      }

      &:first-child {
        margin-left: 0;
      }
    }
  }
}
  • URL: /components/raw/pagination/_pagination.scss
  • Filesystem Path: components/31-molecules/building-blocks/pagination/_pagination.scss
  • Size: 784 Bytes

Pagination

Pagination has a few required elements:

  • A first link.
  • A previous link.
  • A Next link.
  • A last link.
  • An ellipsis between the previous link and the first available next page number.
  • An ellipsis between the next link and the first available previous page number.

The examples here should give you enough context to implement a pagination in your own website or application.