Pagination – Design Portal

Pagination is the method of separating content into different pages on a website.

Demo

<nav class="pagination" aria-label="Page navigation">
  <a class="prev page-numbers" href="https://info.com/business/">Previous</a>
  <a class="page-numbers" href="https://info.com/business/">1</a>
  <span aria-current="page" class="page-numbers current">2</span>
  <a class="page-numbers" href="https://info.com/business/page/3/">3</a>
  <a class="page-numbers" href="https://info.com/business/page/4/">4</a>
  <span class="page-numbers dots">…</span>
  <a class="page-numbers" href="https://info.com/business/page/13/">13</a>
  <a class="next page-numbers" href="https://info.com/business/page/3/">Next</a>
</nav>

.pagination {
  align-items: center;
  display: flex;
  font-family: var(--heading-font);
  inline-size: 100%;
  justify-content: start;

  > * + * {
    border-inline-start: 0;
  }

  > *:first-child {
    border-radius: 0.3125rem 0 0 0.3125rem;
  }

  > *:last-child {
    border-radius: 0 0.3125rem 0.3125rem 0;
  }

  a {
    text-decoration: none;
  }

  .page-numbers {
    background-color: #fff;
    border: 0.0625rem solid var(--light-gray-1);
    color: var(--primary);
    display: inline-block;
    margin: 0;
    padding: 0.625rem 1rem;

    &.current,
    &:hover {
      background-color: var(--primary);
      border-color: var(--primary);
      color: #fff;
    }

    &.prev,
    &.next {
      color: var(--black);

      &:hover {
        color: #fff;
      }
    }
  }
}

Functionality is handled with PHP.

States & Variations

Standard Pagination

Standard pagination used on category and search templates with multiple pages.

<nav class="pagination" aria-label="Page navigation">
  <a class="prev page-numbers" href="https://info.com/business/">Previous</a>
  <a class="page-numbers" href="https://info.com/business/">1</a>
  <span aria-current="page" class="page-numbers current">2</span>
  <a class="page-numbers" href="https://info.com/business/page/3/">3</a>
  <a class="page-numbers" href="https://info.com/business/page/4/">4</a>
  <span class="page-numbers dots">…</span>
  <a class="page-numbers" href="https://info.com/business/page/13/">13</a>
  <a class="next page-numbers" href="https://info.com/business/page/3/">Next</a>
</nav>

Paginated Flow

The pagination used on paginated flows.

<nav class="pagination" aria-label="Page navigation" dir="ltr">
  <button class="button button--pagination-prev" type="button" disabled="">Previous</button>
  <span class="pagination-nav">Page <span class="pagination-nav__current">1</span> of <span class="pagination-nav__total">4</span></span>
  <button class="button button--pagination-next button--pagination-next-page" type="button">Next</button>
</nav>

Usage

Pagination is automatically applied to Wordpress themes that use the paginated flow type, category and search templates with multiple pages.

Anatomy

Pagination
Pagination Button Previous
Pagination Page Number
Pagination Page Current
Pagination Dots
Pagination Button Next
Pagination Navigation