AFW Pattern Lab

Pagination 

<div class="pager">
    <ul>
        <li class="first-page">
            <a data-page="1" href="#">
                First
                <i class="fas fa-chevron-left" aria-hidden="true"></i>
            </a>
        </li>
        <li class="previous-page">
            <a data-page="4" href="#">
                Previous
                <i class="fa fa-chevron-left" aria-hidden="true"></i>
            </a>
        </li>
        <li class="current-page">
            <span>1</span>
        </li>
        <li class="individual-page">
            <a data-page="2" href="#">2</a>
        </li>
        <li class="individual-page">
            <a data-page="3" href="#">3</a>
        </li>
        <li class="individual-page">
            <a data-page="4" href="#">4</a>
        </li>
        <li class="individual-page">
            <a data-page="5" href="#">5</a>
        </li>
        <li class="next-page">
            <a data-page="2" href="#">
                Next
                <i class="fas fa-chevron-right" aria-hidden="true"></i>
            </a>
        </li>
        <li class="last-page">
            <a data-page="32" href="#">
                <i class="fas fa-chevron-right" aria-hidden="true"></i>
                Last
            </a>
        </li>
    </ul>
</div>
 
<div class="pager">
  <ul>
    <li class="first-page">
        <a data-page="1" href="#">
            First
            <i class="fas fa-chevron-left" aria-hidden="true"></i>
        </a>
    </li>
    <li class="previous-page">
        <a data-page="4" href="#">
            Previous
            <i class="fa fa-chevron-left" aria-hidden="true"></i>
        </a>
    </li>
    <li class="current-page">
        <span>1</span>
    </li>
    <li class="individual-page">
        <a data-page="2" href="#">2</a>
    </li>
    <li class="individual-page">
        <a data-page="3" href="#">3</a>
    </li>
    <li class="individual-page">
        <a data-page="4" href="#">4</a>
    </li>
    <li class="individual-page">
        <a data-page="5" href="#">5</a>
    </li>
    <li class="next-page">
        <a data-page="2" href="#">
            Next
            <i class="fas fa-chevron-right" aria-hidden="true"></i>
        </a>
    </li>
    <li class="last-page">
        <a data-page="32" href="#">
            <i class="fas fa-chevron-right" aria-hidden="true"></i>
            Last
        </a>
    </li>
  </ul>
</div>
 
{
  "current": 1
}
  • Content: 
    .pager {
    display: flex;
    
    ul {
        display: inline-flex;
        list-style: none;
        align-items: center;
        margin: 0 auto;
    }

    li {
        display: inline-block;
        margin-inline: rem(5px);

        &:first-child {
            margin-left: 0;
        }

        &:last-child {
            margin-right: 0;
        }

        a,
        span {
            font-size: rem(15px);
            background-color: $color-sky-lighter;
            border: rem(2px) solid $color-sky;
            border-radius: rem(4px);
            color: $color-black;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: rem(35px);
            height: rem(35px);
            padding: rem(8px);
            text-align: center;
            text-decoration: none;
            cursor: pointer;
        }

        a:hover {
            background-color: $color-sky;
        }

        &.current-page {
            span {
                border-color: transparent;
                background-color: $color-blue;
                color: $color-white;
            }
        }

        &.first-page,
        &.previous-page,
        &.next-page,
        &.last-page {
            a {
                font-size: rem(0px);
                i {
                    font-size: rem(13px);
                }
            }
        }
    }
}
  • URL: /components/raw/pagination/pagination.scss
  • Filesystem Path: source/patterns/molecules/pagination/pagination.scss
  • Size: 1.4 KB

No notes defined.