<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.