Pager

<div class="pager">
    <div class="screen-reader-only">Change page to</div>
    <ul>

        <li class="pager__item--first">
            <a href="#">
                First
            </a>
        </li>

        <li class="pager__item--prev">
            <a href="#">
                <svg width="9" height="14" viewBox="0 0 9 14" fill="none" stroke="#2B666A" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.60577 6.6709L7.19434 12.5037" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round" />
                    <path d="M1.60594 6.67081L7.18164 0.932251" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round" />
                </svg>

                <span class="screen-reader-only">
                    Previous
                </span>
            </a>
        </li>

        <li class="pager__item--ellipsis">...</li>

        <li class="pager__item--page">

            <a href="#">
                3
            </a>

        </li>

        <li class="pager__item--page">

            <a href="#">
                4
            </a>

        </li>

        <li class="pager__item--page">

            <a class="active" href="#">
                5
            </a>

        </li>

        <li class="pager__item--page">

            <a href="#">
                6
            </a>

        </li>

        <li class="pager__item--page">

            <a href="#">
                7
            </a>

        </li>

        <li class="pager__item--ellipsis">...</li>

        <li class="pager__item--next">
            <a href="#">
                <span class="screen-reader-only">
                    Next
                </span>

                <svg width="8" height="14" viewBox="0 0 8 14" fill="none" stroke="#2B666A" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.54437 6.76514L0.95581 0.93229" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round" />
                    <path d="M6.54421 6.76522L0.968506 12.5038" stroke-width="1.2" stroke-miterlimit="10" stroke-linecap="square" stroke-linejoin="round" />
                </svg>

            </a>
        </li>

        <li class="pager__item--last">
            <a href="#">
                Last
            </a>
        </li>

    </ul>
</div>
<div class="pager">
  <div class="screen-reader-only">Change page to</div>
  <ul>
    {% for page in pages %}
      {% if page.type == 'ellipsis' %}
        <li class="pager__item--ellipsis">...</li>
      {% elif page.type == 'first' %}
        <li class="pager__item--first">
          <a href="{{ page.url }}">
            {{ page.label }}
          </a>
        </li>
      {% elif page.type == 'prev' %}
        <li class="pager__item--prev">
          <a href="{{ page.url }}">
            {% include '@prev-icon' %}

            <span class="screen-reader-only">
              {{ page.label }}
            </span>
          </a>
        </li>
      {% elif page.type == 'next' %}
        <li class="pager__item--next">
          <a href="{{ page.url }}">
            <span class="screen-reader-only">
              {{ page.label }}
            </span>

            {% include '@next-icon' %}
          </a>
        </li>
      {% elif page.type == 'last' %}
        <li class="pager__item--last">
          <a href="{{ page.url }}">
            {{ page.label }}
          </a>
        </li>
      {% else %}
        <li class="pager__item--page">
          {% if page.type == 'number' %}
            <a {% if page.active === true %}class="active"{% endif %} href="{{ page.url }}">
              {{ page.label }}
            </a>
          {% endif %}
        </li>
      {% endif %}
    {% endfor %}
  </ul>
</div>
{
  "pages": [
    {
      "label": "First",
      "type": "first",
      "url": "#"
    },
    {
      "label": "Previous",
      "type": "prev",
      "url": "#"
    },
    {
      "type": "ellipsis"
    },
    {
      "label": "3",
      "type": "number",
      "url": "#"
    },
    {
      "label": "4",
      "type": "number",
      "url": "#"
    },
    {
      "label": "5",
      "type": "number",
      "url": "#",
      "active": true
    },
    {
      "label": "6",
      "type": "number",
      "url": "#"
    },
    {
      "label": "7",
      "type": "number",
      "url": "#"
    },
    {
      "type": "ellipsis"
    },
    {
      "label": "Next",
      "type": "next",
      "url": "#"
    },
    {
      "label": "Last",
      "type": "last",
      "url": "#"
    }
  ]
}
  • Content:
    .pager {
      font-size: 16px;
      font-weight: 400;
      border: 1px solid $teal-dark;
      display: inline-block;
    
      ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        padding: 8px 14px;
        flex-wrap: wrap;
    
        @include breakpoint($medium) {
          padding: 12px 18px;
        }
      }
    
      &__item {
        a {
          display: block;
    
          &:hover {
            svg {
              stroke: $orange;
            }
          }
        }
    
        &--first {
          text-decoration: underline;
          margin-right: 8px;
    
          @include breakpoint($medium) {
            margin-right: 18px;
          }
        }
    
        &--prev {
          margin-right: 8px;
    
          @include breakpoint($medium) {
            margin-right: 20px;
          }
    
          a {
            padding: 0 6px;
            &:hover {
              svg {
                stroke: $orange;
              }
            }
          }
        }
    
        &--ellipsis {
          padding: 0 6px;
    
          @include breakpoint($medium) {
            padding: 0 12px;
          }
        }
    
        &--page {
          margin: 0 4px;
    
          a {
            padding: 6px;
    
            &.active {
              font-weight: bold;
            }
    
            &:hover {
              text-decoration: dotted underline;
            }
          }
        }
    
        &--next {
          margin-left: 8px;
    
          @include breakpoint($medium) {
            margin-left: 20px;
          }
    
          a {
            padding: 0 6px;
    
            &:hover {
              svg {
                stroke: $orange;
              }
            }
          }
        }
    
        &--last {
          text-decoration: underline;
          margin-left: 8px;
    
          @include breakpoint($medium) {
            margin-left: 18px;
          }
        }
      }
    }
    
  • URL: /components/raw/pager/pager.scss
  • Filesystem Path: src/components/02-elements/pager/pager.scss
  • Size: 1.6 KB

When implementing the simple pager, you should make the “Next” and “Previous” labels visible to all users.