cf-pagination docs

Theme variables

The following color and sizing variables are exposed, allowing you to easily override them before compiling.

Colors

Sizing

Pagination

To enable the component to jump directly to the paginated content place place #pagination_content directly above your paginated content.

Default pagination

<div id="pagination_content"></div>

<!-- Paginated content here -->

<nav class="pagination">
    <a class="btn btn__super pagination_prev" href="#pagination_content">
        <span class="btn_icon__left cf-icon cf-icon-left"></span>
        Previous
    </a>
    <a class="btn btn__super pagination_next" href="#pagination_content">
        Next
        <span class="btn_icon__right cf-icon cf-icon-right"></span>
    </a>
    <form class="pagination_form" action="index.html#pagination_content">
        <label class="pagination_label"
               for="pagination_current-page">
            Page
            <span class="u-visually-hidden">
                number out of 149 total pages
            </span>
        </label>
        <input
            class="pagination_current-page"
            id="pagination_current-page"
            name="pagination_current-page"
            type="number" min="1" max="149"
            value="149">
        <span class="pagination_label">
            <span aria-hidden="true">
                of 149
            </span>
        </span>
        <button class="btn btn__link pagination_submit"
                id="pagination_submit"
                type="submit">
            Go
        </button>
    </form>
</nav>

.pagination {
  display: block;
  position: relative;
}
@media only all and (max-width: 19.9375em) {
  .pagination_prev.btn,
  .pagination_next.btn {
    display: block;
    text-align: center;
  }
  .pagination_prev.btn + .pagination_next.btn {
    margin: 1em 0 0;
  }
}
@media only all and (min-width: 20em) {
  .pagination_next {
    position: absolute;
    top: 0;
    right: 0;
  }
}
@media only all and (max-width: 23.0625em) {
  .pagination_prev.btn,
  .pagination_next.btn {
    padding-left: 1.11111111em;
    padding-right: 1.11111111em;
  }
}
.pagination_form {
  display: block;
  padding: 0.3125em 0.3125em 0.375em;
  margin: 1em 0 0 0;
  background: #eee4ed;
  color: #5b3b57;
  text-align: center;
}
.pagination_label {
  display: inline-block;
  margin: 0;
  font-family: "AvenirNextLTW01-Medium", Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 1em;
  vertical-align: middle;
}
.lt-ie8 .pagination_label {
  display: inline;
}
.lt-ie9 .pagination_label {
  font-weight: normal !important;
}
.pagination_current-page,
input[type="number"].pagination_current-page,
input[type="text"].pagination_current-page {
  display: inline-block;
  width: 2.625em;
  margin: 0 0.25em;
  font-size: 1em;
  font-family: "AvenirNextLTW01-Demi", Arial, sans-serif;
  font-style: normal;
  font-weight: bold;
  text-align: right;
  vertical-align: middle;
}
.lt-ie8 .pagination_current-page,
.lt-ie8 input[type="number"].pagination_current-page,
.lt-ie8 input[type="text"].pagination_current-page {
  display: inline;
}
.lt-ie9 .pagination_current-page,
.lt-ie9 input[type="number"].pagination_current-page,
.lt-ie9 input[type="text"].pagination_current-page {
  font-weight: normal !important;
}
.lt-ie8 .pagination_current-page,
.lt-ie8 input[type="number"].pagination_current-page,
.lt-ie8 input[type="text"].pagination_current-page {
  margin: 0 4px;
}
.pagination_submit.btn {
  display: inline-block;
  margin: 0 0 0 0.875em;
  font-size: 1em;
  vertical-align: middle;
}
.lt-ie8 .pagination_submit.btn {
  display: inline;
}
.lt-ie8 .pagination_submit.btn {
  padding-left: 0.875em;
  margin: 0;
  border: none;
  text-decoration: underline;
}
@media only all and (min-width: 40em) {
  .pagination_form {
    margin: 0;
    border-radius: 0.25em;
  }
  .pagination_prev {
    position: absolute;
    top: 0;
    left: 0;
  }
  .pagination_prev,
  .pagination_prev:link,
  .pagination_prev:visited {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .pagination_next,
  .pagination_next:link,
  .pagination_next:visited {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}