360Giving Design System - Components

Pager: First Page 

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

        <li class="pager__item--page">

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

        </li>

        <li class="pager__item--page">

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

        </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 href="#">
                5
            </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": "1",
      "type": "number",
      "url": "#",
      "active": true
    },
    {
      "label": "2",
      "type": "number",
      "url": "#"
    },
    {
      "label": "3",
      "type": "number",
      "url": "#"
    },
    {
      "label": "4",
      "type": "number",
      "url": "#"
    },
    {
      "label": "5",
      "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.