Academy of Natural Sciences

Pagination: Default 

<div class="o-pagination">
    <nav class="o-pagination__nav" aria-label="Pagination">

        <div class="o-pagination__prev">
            <a href="#prev" class="o-pagination__dir-link">
                <span class="u-sr-only">Previous Page</span>
                <span class="o-pagination__dir-icon" aria-hidden="true">
                    <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1 1L6 6L1 11" class="u-ct-stroke" />
                    </svg>

                </span>
            </a>
        </div>

        <ul class="o-pagination__items" aria-label="Pagination links">

            <li class="o-pagination__item">
                <a href="#1" class="o-pagination__link" aria-current="page" aria-label="Current Page - Page 1">1</a>
            </li>

            <li class="o-pagination__item">
                <a href="#2" class="o-pagination__link" aria-label="Page 2">2</a>
            </li>

            <li class="o-pagination__item">
                <a href="#3" class="o-pagination__link" aria-label="Page 3">3</a>
            </li>

            <li class="o-pagination__item">
                <a href="#4" class="o-pagination__link" aria-label="Page 4">4</a>
            </li>

            <li class="o-pagination__item o-pagination__item--elipsis">
                <span class="o-pagination__elipsis"> … </span>
            </li>

            <li class="o-pagination__item">
                <a href="#14" class="o-pagination__link" aria-label="Page 14">14</a>
            </li>

        </ul>

        <div class="o-pagination__next">
            <a href="#next" class="o-pagination__dir-link">
                <span class="u-sr-only">Next Page</span>
                <span class="o-pagination__dir-icon" aria-hidden="true">
                    <svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1 1L6 6L1 11" class="u-ct-stroke" />
                    </svg>

                </span>
            </a>
        </div>

    </nav>
</div>
 
<div class="o-pagination">
  <nav class="o-pagination__nav" aria-label="Pagination">

    {% if prev %}
      <div class="o-pagination__prev">
        <a href="{{ prev.link }}" class="o-pagination__dir-link">
          <span class="u-sr-only">{{ prev.title }}</span>
          <span class="o-pagination__dir-icon" aria-hidden="true">
            {% include "03-icons/pagination-direction" %}
          </span>
        </a>
      </div>
    {% endif %}

    <ul class="o-pagination__items" aria-label="Pagination links">
      {% for item in items %}
        {% if item.isElipsis %}
          <li class="o-pagination__item o-pagination__item--elipsis">
            <span class="o-pagination__elipsis"> … </span>
          </li>
        {% else %}
          <li class="o-pagination__item">
            <a href="{{ item.link }}" class="o-pagination__link" {% if item.isCurrent %} aria-current="page" aria-label="Current Page - Page {{ item.title }}"{% else %} aria-label="Page {{ item.title }}"{% endif %}>{{ item.title }}</a>
          </li>
        {% endif %}
      {% endfor %}
    </ul>

    {% if next %}
      <div class="o-pagination__next">
        <a href="{{ next.link }}" class="o-pagination__dir-link">
          <span class="u-sr-only">{{ next.title }}</span>
          <span class="o-pagination__dir-icon" aria-hidden="true">
            {% include "03-icons/pagination-direction" %}
          </span>
        </a>
      </div>
    {% endif %}
  </nav>
</div>
 
{
  "pageColorTheme": "teal",
  "prev": {
    "title": "Previous Page",
    "link": "#prev"
  },
  "items": [
    {
      "title": "1",
      "link": "#1",
      "isCurrent": true
    },
    {
      "title": "2",
      "link": "#2"
    },
    {
      "title": "3",
      "link": "#3"
    },
    {
      "title": "4",
      "link": "#4"
    },
    {
      "isElipsis": true
    },
    {
      "link": "#14",
      "title": "14"
    }
  ],
  "next": {
    "title": "Next Page",
    "link": "#next"
  }
}
  • Content: 
    .o-pagination__nav {
  display: flex;
  align-items: center;
}

.o-pagination__items {
  display: flex;
  align-items: center;
}

.o-pagination__link,
.o-pagination__elipsis {
  display: flex;
  width: 3.2rem;
  height: 4.4rem;
  align-items: center;
  justify-content: center;
  @include text--cta;
}

.o-pagination__elipsis {
  width: 2.4rem;
}

.o-pagination__link {
  position: relative;

  &:after {
    content: '';
    display: block;
    width: 1.8rem;
    height: 0.2rem;
    background-color: transparent;
    transition: all 0.24s ease-in-out;
    position: absolute;
    bottom: 0.8rem;
    left: 50%;
    margin-left: -0.9rem;
  }

  &[aria-current="page"] {

    &:after {
      background-color: var(--ct-dark);
    }
  }

  &:hover {

    &:after {
      background-color: $c-charcoal;
    }
  }
}

.o-pagination__dir-link {
  display: block;
  width: 4.4rem;
  height: 4.4rem;
  position: relative;

  &:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: $c-charcoal-light;
    border-radius: 50%;
    width: 2.4rem;
    height: 2.4rem;
  }
}

.o-pagination__dir-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  svg {
    display: block;
  }
}

.o-pagination__prev {
  margin-right: 1.2rem;

  .o-pagination__dir-icon svg {
    transform: rotate(180deg);
  }
}

.o-pagination__next {
  margin-left: 1.2rem;
}
  • URL: /components/raw/pagination/pagination.scss
  • Filesystem Path: patterns\04-objects\pagination\pagination.scss
  • Size: 1.6 KB

No notes defined.