NNPHI Pattern Library

Pager: Pager X 15 

<nav class="pager" aria-label="Pagination">
    <div class="pager__prev-container">
        <div class="pager__prev pager__prev--inactive" aria-hidden="true">
            <span class="pager__prev-icon">
                <svg role="img" class="left-chevron" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" viewBox="0 0 8 12">
                    <title>previous</title>
                    <path class="_mark left-chevron__shape" d="M3.49504 5.98003L7.99893 0.0064757L7.99035 2.55136e-07L4.50389 5.59932e-07L-5.26754e-07 5.97463L4.51032 12L8 12L3.49504 5.98003Z" />
                </svg>
            </span>
            Previous
        </div>
    </div>
    <ul class="pager__pages">
        <li class="pager__page">
            <span class="pager__page-current">1</span>
        </li>
        <li class="pager__page">
            <a href="#" class="pager__page-link">2</a>
        </li>
        <li class="pager__page">
            <a href="#" class="pager__page-link">3</a>
        </li>
        <li class="pager__page">
            <a href="#" class="pager__page-link">4</a>
        </li>
        <li class="pager__page">
            <a href="#" class="pager__page-link">5</a>
        </li>
        <li class="pager__page">
            <a href="#" class="pager__page-link">6</a>
        </li>
        <li class="pager__page">
            <a href="#" class="pager__page-link">7</a>
        </li>
        <li class="pager__page">
            <a href="#" class="pager__page-link">8</a>
        </li>
        <li class="pager__page">
            <a href="#" class="pager__page-link">9</a>
        </li>
        <li class="pager__page">
            <a href="#" class="pager__page-link">10</a>
        </li>
        <li class="pager__page">
            <a href="#" class="pager__page-link">11</a>
        </li>
        <li class="pager__page">
            <a href="#" class="pager__page-link">12</a>
        </li>
        <li class="pager__page">
            <a href="#" class="pager__page-link">13</a>
        </li>
        <li class="pager__page">
            <a href="#" class="pager__page-link">14</a>
        </li>
    </ul>
    <div class="pager__next-container">
        <a href="#" class="pager__next" aria-label="next page">
            Next
            <span class="pager__next-icon">
                <svg role="img" class="right-chevron" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" viewBox="0 0 8 12">
                    <title>right chevron</title>
                    <path class="_mark right-chevron__shape" d="M4.50496 5.98003L0.00107202 0.0064757L0.00964937 2.55136e-07L3.49611 5.59932e-07L8 5.97463L3.48968 12L-9.53674e-07 12L4.50496 5.98003Z" />
                </svg>
            </span>
        </a>
    </div>
</nav>
 
<nav class="pager" aria-label="Pagination">
    <div class="pager__prev-container">
    {%  if pagination.prev.link|length %}
        <a href="{{pagination.prev.link}}" class="pager__prev" aria-label="previous page">
            <span class="pager__prev-icon">
                {% include 'bits/icons/left-chevron.twig' %}
            </span>
            Previous
        </a>
    {% else %}
        <div class="pager__prev pager__prev--inactive" aria-hidden="true">
            <span class="pager__prev-icon">
            {% include 'bits/icons/left-chevron.twig' %}
            </span>
            Previous
        </div>
    {% endif %}
    </div>
    <ul class="pager__pages">
        {% for page in pagination.pages %}
            <li class="pager__page">
                {% if not page.current and not page.link %}
                    <span class="pager__page-ellipses">{{page.title}}</span>
                {% elseif not page.current %}
                    <a href="{{page.link}}" class="pager__page-link">{{page.title}}</a>
                {% else %}
                    <span class="pager__page-current">{{page.title}}</span>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
    <div class="pager__next-container">
    {%  if pagination.next.link|length %}
    <a href="{{pagination.next.link}}" class="pager__next" aria-label="next page">
        Next
        <span class="pager__next-icon">
            {% include 'bits/icons/right-chevron.twig' %}
        </span>
    </a>
    {% else %}
        <div class="pager__next pager__next--inactive" aria-hidden="true">
            Next
            <span class="pager__next-icon">
            {% include 'bits/icons/right-chevron.twig' %}
            </span>
        </div>
    {% endif %}
    </div>
</nav>
 
{
  "site": {
    "title": "National Network of Public Health Institutes"
  },
  "background": "white",
  "breadcrumbs": [
    {
      "title": "Home",
      "url": "#"
    },
    {
      "title": "Primary Page One",
      "url": "#"
    },
    {
      "title": "Interior Page One",
      "url": "#"
    }
  ],
  "footerLinks": {
    "items": [
      {
        "title": "Subscribe to our newsletter",
        "url": "#"
      },
      {
        "title": "Explore membership benefits",
        "url": "#"
      },
      {
        "title": "See career opportunities",
        "url": "#"
      }
    ]
  },
  "contactInfo": {
    "copyright": "© National Network of Public Health Institutes. All Rights Reserved",
    "facebookLink": "https://facebook.com",
    "linkedInLink": "https://linkedin.com",
    "youtubeLink": "https://youtube.com",
    "flickrLink": "https://flickr.com",
    "twitterLink": "https://twitter.com",
    "instagramLink": "https://instagram.com",
    "youTubeLink": "https://youtube.com"
  },
  "utilityNavigation": {
    "items": [
      {
        "title": "Member directory",
        "url": "#"
      },
      {
        "title": "Events",
        "url": "#",
        "isActive": true
      },
      {
        "title": "Blog",
        "url": "#"
      }
    ]
  },
  "primaryNavigation": {
    "items": [
      {
        "title": "Workforce resources",
        "url": "#",
        "children": [
          {
            "title": "Resource Directory",
            "url": "#",
            "children": []
          },
          {
            "title": "Trainings",
            "url": "#",
            "children": [
              {
                "title": "Training Level 3 example",
                "url": "#"
              }
            ]
          }
        ]
      },
      {
        "title": "Programs & Projects",
        "url": "#",
        "isDescendantActive": true,
        "children": [
          {
            "title": "Data Modernization",
            "url": "#",
            "children": []
          },
          {
            "title": "Environmental Health and Emergency Preparedness",
            "url": "#",
            "children": []
          },
          {
            "title": "Evaluation and Impact",
            "url": "#",
            "isDescendantActive": true,
            "children": [
              {
                "title": "Third level example",
                "url": "#",
                "isActive": true,
                "children": [
                  {
                    "title": "Fourth level example",
                    "url": "#",
                    "isActive": true,
                    "children": [
                      {
                        "title": "Fifth level example",
                        "url": "#",
                        "isActive": true
                      }
                    ]
                  },
                  {
                    "title": "Fourth level example 2",
                    "url": "#"
                  },
                  {
                    "title": "Fourth level example 3",
                    "url": "#"
                  }
                ]
              }
            ]
          },
          {
            "title": "Multisector Strategies and Population Health",
            "url": "#",
            "children": []
          },
          {
            "title": "Public Health Events and Convenings Management",
            "url": "#",
            "children": []
          },
          {
            "title": "Public Health Infrastructure Grant",
            "url": "#",
            "children": []
          },
          {
            "title": "Public health training",
            "url": "#",
            "children": []
          }
        ]
      },
      {
        "title": "Explore the Network",
        "url": "#",
        "children": [
          {
            "title": "Member Directory",
            "url": "#",
            "children": []
          },
          {
            "title": "Membership paths",
            "url": "#",
            "children": []
          }
        ]
      },
      {
        "title": "Partner with us",
        "url": "#"
      },
      {
        "title": "About",
        "url": "#",
        "children": [
          {
            "title": "Blog",
            "url": "#",
            "children": []
          },
          {
            "title": "Events",
            "url": "#",
            "children": []
          },
          {
            "title": "Newsletters",
            "url": "#",
            "children": []
          },
          {
            "title": "Signature programs",
            "url": "#",
            "children": []
          },
          {
            "title": "Contact us",
            "url": "#",
            "children": []
          },
          {
            "title": "Meet the team",
            "url": "#",
            "children": []
          }
        ]
      }
    ]
  },
  "pagination": {
    "pages": [
      {
        "title": 1,
        "current": true
      },
      {
        "title": 2,
        "link": "#"
      },
      {
        "title": 3,
        "link": "#"
      },
      {
        "title": 4,
        "link": "#"
      },
      {
        "title": 5,
        "link": "#"
      },
      {
        "title": 6,
        "link": "#"
      },
      {
        "title": 7,
        "link": "#"
      },
      {
        "title": 8,
        "link": "#"
      },
      {
        "title": 9,
        "link": "#"
      },
      {
        "title": 10,
        "link": "#"
      },
      {
        "title": 11,
        "link": "#"
      },
      {
        "title": 12,
        "link": "#"
      },
      {
        "title": 13,
        "link": "#"
      },
      {
        "title": 14,
        "link": "#"
      }
    ],
    "next": {
      "link": "#"
    }
  }
}
  • Content: 
    $breakpoint: 43.75rem;

.pager {
    --backgroundColor: transparent;
    --backgroundColorFocused: var(--brightPurple);
    --backgroundColorDisabled: transparent;
    --borderColor: var(--purple);
    --borderColorFocused: var(--brightPurple);
    --borderColorDisabled: var(--grayDarkest);
    --textColor: var(--purple);
    --textColorFocused: var(--purple);
    --textColorDisabled: var(--grayDarkest);
    --iconColor: var(--brightPurple);
    --iconColorFocused: var(--white);
    --iconColorDisabled: var(--grayDarkest);
    --currentBackgroundColor: var(--purple);
    --currentBorderColor: var(--purple);
    --currentTextColor: var(--white);
    --ellipsisColor: var(--purple);

    --currentIconColor: var(--iconColor);

    @include detailBold;
    color: var(--purple);
    display: flex;
    justify-content: space-around;
    margin-top: 3rem;
    gap: 1rem;

    @media (max-width: $breakpoint) {
        flex-wrap: wrap;
    }

    &__prev-container,
    &__next-container {
        flex-shrink: 0;

        @media (max-width: $breakpoint) {
            order: 1;
        }
    }

    &__page-current {
        background-color: var(--currentBackgroundColor);
        border-radius: .125rem;
        border: 2px solid var(--borderColor);
        color: var(--currentTextColor);
        display: flex;
        justify-content: center;
        line-height: 2em;
        min-width: 2.2em;
        padding: 0 .5rem;
    }

    &__page-link {
        background-color: var(--backgroundColor);
        border-radius: .125rem;
        border: 2px solid var(--borderColor);
        color: var(--textColor);
        display: flex;
        justify-content: center;
        line-height: 2em;
        min-width: 2.2em;
        padding: 0 .5rem;
        text-decoration: none;
        transition: all 0.3s;

        &:active,
        &:focus,
        &:hover {
            background-color: var(--backgroundColorFocused);
            border: 2px solid var(--borderColorFocused);
            color: var(--textColorFocused);
        }
    }

    &__page-ellipses {
        color: var(--ellipsisColor);
    }

    &__prev,
    &__next {
        align-items: center;
        background-color: var(--backgroundColor);
        border-radius: .125rem;
        border: 2px solid var(--borderColor);
        color: var(--textColor);
        display: flex;
        gap: .75rem;
        justify-content: center;
        line-height: 2em;
        min-width: 2.2em;
        padding: 0 1.25rem;
        text-decoration: none;
        transition: all 0.3s;

        &:not(&--inactive):active,
        &:not(&--inactive):focus,
        &:not(&--inactive):hover {
            --currentIconColor: var(--iconColorFocused);
            background-color: var(--backgroundColorFocused);
            border: 2px solid var(--borderColorFocused);
            color: var(--textColorFocused);
        }

        &--inactive {
            --currentIconColor: var(--iconColorDisabled);
            background-color: var(--backgroundColorDisabled);
            border-color: var(--borderColorDisabled);
            color: var(--textColorDisabled);
        }
    }

    &__prev-icon,
    &__next-icon {
        color: var(--currentIconColor);
        display: inline-block;
        transition: all 0.3s;
        width: .5rem;
    }

    &__pages {
        column-gap: .5rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 1rem;

        @media (min-width: $breakpoint) {
            flex-grow: 1;
        }

        @media (max-width: $breakpoint) {
            justify-content: center;
            width: 100%;
        }
    }
}
  • URL: /components/raw/pager/pager.scss
  • Filesystem Path: patterns/partials/navigation/pager/pager.scss
  • Size: 3.7 KB

No notes defined.