Lehigh Clutch Style Guide

Pagination 

<ol class="pagination">
    <li class="previous"><a href="#">previous</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="next"><a href="#">next</a></li>
    <li class="last"><a href="#">last</a></li>
</ol>
 
<ol class="pagination">
    <li class="previous"><a href="#">previous</a></li>
    {% for i in 1..5 %}
        <li><a href="#">{{ i }}</a></li>
    {% endfor %}
    <li class="next"><a href="#">next</a></li>
    <li class="last"><a href="#">last</a></li>
</ol>
 
/* No context defined. */
  • Content: 
    .pagination {
  @include reset-list-nav;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;

  li {
    margin: 0 $space_one_half;
    font-size: 0.9rem;

    @include media-breakpoint-up(md) {
      margin: 0 $spacer;
      font-size: 1rem;
    }

    a {
      color: $grey_darkest;
      color: var(--grey_darkest, $grey_darkest);
      font-weight: normal;
      border-bottom: 0;

      .color-scheme-dark & {
        color: $white;
        color: var(--white, $white);
      }

      &.page-link {
        display: unset;
        padding: 0;
        margin-left: unset;
        background-color: inherit;
        border: 0;
      }
    }

    &.active {
      a {
        &.page-link {
          background-color: unset;
          border-color: unset;
          color: inherit;
          text-decoration: underline;
        }
      }
    }

    &.first,
    &.previous {
      &::before {
        @include font-awesome-base;
        display: inline-block;
        content: "\f100";
        margin: 0 2px 0 0;
        position: relative;
        top: 1px;
      }
    }

    &.previous {
      &::before {
        content: "\f104";
      }
    }

    &.next,
    &.last {
      &::after {
        @include font-awesome-base;
        display: inline-block;
        content: "\f105";
        margin: 0 0 0 2px;
        position: relative;
        top: 1px;
      }
    }

    &.last {
      &::after {
        content: "\f101";
      }
    }
  }
}
  • URL: /components/raw/pagination/pagination.scss
  • Filesystem Path: bits/03-pieces/pagination/pagination.scss
  • Size: 1.5 KB

Display the pagination.