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