# Paginator

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <nav class="paginator">
        <div class="paginator__prevs">
            <a href="#" class="paginator__item paginator__link">First</a>
            <a href="#" class="paginator__item paginator__link">Previous</a>
        </div>
        <ul class="paginator__list">
            <li class="paginator__item paginator__item--active"><a href="#" class="paginator__link paginator__link--number">1</a></li>
            <li class="paginator__item"><a href="#" class="paginator__link paginator__link--number">2</a></li>
            <li class="paginator__item"><a href="#" class="paginator__link paginator__link--number">3</a></li>
            <li class="paginator__item"><a href="#" class="paginator__link paginator__link--number">4</a></li>
            <li class="paginator__item"><a href="#" class="paginator__link paginator__link--number">5</a></li>
            <li class="paginator__item paginator__dots">…</li>
        </ul>
        <div class="paginator__nexts">
            <a href="#" class="paginator__item paginator__link">Next</a>
            <a href="#" class="paginator__item paginator__link">Last</a>
        </div>
    </nav>

`
`

    <nav class="paginator">
        <div class="paginator__prevs">
            <a href="#" class="paginator__item paginator__link">First</a>
            <a href="#" class="paginator__item paginator__link">Previous</a>
        </div>
        <ul class="paginator__list">
            <li class="paginator__item paginator__item--active"><a href="#" class="paginator__link paginator__link--number">1</a></li>
            <li class="paginator__item"><a href="#" class="paginator__link paginator__link--number">2</a></li>
            <li class="paginator__item"><a href="#" class="paginator__link paginator__link--number">3</a></li>
            <li class="paginator__item"><a href="#" class="paginator__link paginator__link--number">4</a></li>
            <li class="paginator__item"><a href="#" class="paginator__link paginator__link--number">5</a></li>
            <li class="paginator__item paginator__dots">…</li>
        </ul>
        <div class="paginator__nexts">
            <a href="#" class="paginator__item paginator__link">Next</a>
            <a href="#" class="paginator__item paginator__link">Last</a>
        </div>
    </nav>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      .paginator {
        @extend %heading-font-regular;

        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        margin: $spacer-sm 0;

        font-size: $font-size-md;
        color: $paginator-text-color;
      }

      .paginator__list {
        @extend %list-unstyled;

        display: flex;
        margin: 0;
      }

      .paginator__item {
        @extend %heading-font-bold;
        @extend %link-unstyled;

        position: relative;
      }

      .paginator__item--active {
        &::after {
          content: '';

          position: absolute;
          bottom: -0.15em;

          display: block;

          width: 100%;
          height: 3px;

          background-color: $paginator-active-color;
        }
      }

      .paginator__link,
      .paginator__dots {
        padding: $spacer-xxs $spacer-xs;
      }

      .paginator__link {
        @extend %link-unstyled;

        display: inline-block;
        transition: standard-transition(color);

        &:hover,
        &focus {
          color: $paginator-focus-color;
        }
      }

      .paginator__prevs {
        > *:first-child {
          padding-left: 0;
        }
      }

      .paginator__nexts {
        > *:last-child {
          padding-right: 0;
        }
      }

      @media screen and (max-width: $grid-breakpoint-sm) {
        .paginator {
          justify-content: space-between;
          margin-top: $spacer-md;
          font-size: $font-size-base;
        }

        .paginator__list {
          justify-content: space-between;
          order: -1;
          width: 100%;
        }

        .paginator__prevs {
          text-align: left;
        }

        .paginator__nexts {
          text-align: right;
        }

        .paginator__nexts,
        .paginator__prevs {
          flex-grow: 1;
          margin-top: $spacer-sm;
        }
      }

  `
- URL: /components/raw/paginator/_paginator.scss
- Filesystem Path: components/04-molecules/paginator/_paginator.scss
- Size: 1.4 KB

- Handle: @paginator
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/04-molecules/paginator/paginator.html

No notes defined.