arrow_back
View code
<div class="pagination-v1 large" data-page="1" data-num-pages="20">
  <div class="prev">
    <a href="#0" class="disabled">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
        <title>Previous</title>
        <polygon points="7.9 4.41 8.58 5.14 4.97 8.5 8.58 11.86 7.9 12.59 3.5 8.5 7.9 4.41" />
      </svg>
      <span>Prev</span>
    </a>
  </div>
  <div class="pg-container">
    <div class="pg selected">1</div>
    <div class="pg">2</div>
    <div class="pg">3</div>
    <div class="pg no-select">...</div>
    <div class="pg">7</div>
  </div>
  <div class="next">
    <a href="#0">
      <span>Next</span>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
        <title>Next</title>
        <polygon points="7.1 12.59 6.42 11.86 10.03 8.5 6.42 5.14 7.1 4.41 11.5 8.5 7.1 12.59" />
      </svg>
    </a>
  </div>
</div>
Copy HTML
/*
 * File: _pagination.scss
 * Location /src/scss/components
 * Pagination component
 */

.pagination-v1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    &.large {
        font-size: 20px;
        @media screen and (max-width: $tablet-breakpoint) {
            font-size: 16px;
        }
    }
    .pg-container {
        display: inline-flex;
        align-items: center;
    }
    .pg {
        padding: 0.3rem 0.8rem;
        border-radius: 3px;
        cursor: pointer;
        margin: 0.4rem;
        @media screen and (max-width: $tablet-breakpoint) {
            margin: 0.4rem;
            padding: 0.3rem 0.6rem;
        }
        transition: all 0.2s;
        &.no-select {
            &:hover {
                background: none;
                cursor: default;
            }
        }
        &:hover {
            background: var(--color-lowest);
        }
        &.selected {
            background: var(--color-highest);
            color: var(--color-lowest)
        }
    }
    a {
        color: var(--color-highest);
        text-decoration: none;
        padding: 0.4rem 0.6rem;
        display: inline-flex;
        align-items: center;
        border-radius: 3px;
        line-height: 1;
        &.disabled {
            pointer-events: none;
            opacity: 0.3;
        }
        svg {
            width: 1.2em;
            height: 1.2em;
        }
        span {
            @media screen and (max-width: $tablet-breakpoint) {
                display: none;
            }
        }
        &:hover {
            background: var(--color-lowest);
        }
    }
    .prev {
        margin-right: 0.1rem;
    }
    .next {
        margin-left: 0.1rem;
    }
}
Copy SCSS
Upgrade to professional version

Using professional version, you will have unlimited number of projects and unlimited access to materials in Kodhus.com.