Skip to content

Pagination

Use pagination element for inserting a pagination anywhere on the page.

Examples

Storefront theme provides predefined stylings for a single customizable pagination with a few classes for pagination buttons.

HTML
    <div class="pagination">
        <a
            href="https://example.com/page/first-page"
            class="pagination__button btn_outline pagination__button_secondary"
        >
            <svg class="icon">
                <use xlink:href="https://example.com#icon-chevrons-left"></use>
            </svg>
        </a>

        <a
            href="https://example.com/page/previous-page"
            class="pagination__button btn_outline pagination__button_with-text"
        >
            <svg class="icon">
                <use xlink:href="https://example.com#icon-chevron-left"></use>
            </svg>

            <span class="pagination__button-text">Previous</span>
        </a>

        <div class="pagination__page-selector">
            <span class="pagination__page-selector-text">Page</span>
            <pagination-page-number pagination-url="/pl/c/Owoce/24/1/full">
                <div class="control">
                    <div class="control__content">
                        <div class="control__element">
                            <label for="pagination-page-number">
                                <input
                                    id="pagination-page-number"
                                    type="number"
                                    name="pagination-page-number"
                                    class="input__control input input_xs input_text-center input_no-arrows"
                                    value="1"
                                >
                            </label>
                        </div>
                    </div>
                </div>
            </pagination-page-number>
            <span class="pagination__page-selector-text">out of 3</span>
        </div>

         <a
            href="https://example.com/page/next-page"
            class="pagination__button btn_secondary pagination__button_with-text"
        >
            <span class="pagination__button-text">Next</span>

            <svg class="icon">
                <use xlink:href="https://example.com#icon-chevron-right"></use>
            </svg>
        </a>

        <a
            href="https://example.com/page/last-page"
            class="
                pagination__button
                btn_secondary
                pagination__button_secondary
            "
        >
            <svg class="icon">
                <use xlink:href="https://example.com#icon-chevrons-right"></use>
            </svg>
        </a>
    </div>

Pagination buttons

There are a few different modifiers for pagination buttons available. Besides standard pagination__button class we provide stylings for two size modifiers pagination__button_secondary and pagination__button_with-text.

Pagination tags

The .pagination class was designed to be used with <div> elements. However, you can use them with any element. Eg. <section> or <nav>.

LESS

You can modify any pagination less variable in your User Less section to change pagination styles.

Pagination variables

Variables used to style pagination.

@paginationGap: @globalSpacing;

@paginationButtonGap: calc(@globalSpacing * 0.625);
@paginationButtonFontSize: @fontSizeInPxS;
@paginationButtonLineHeight: @lineHeightInPxS;
@paginationButtonPadding: calc(@globalSpacing * 0.75);

@paginationButtonSmallPadding: calc(@globalSpacing * 0.5);
@paginationButtonSmallPaddingMobile: calc(@globalSpacing * 0.5);

@paginationButtonWithTextPaddingVertical: calc(@globalSpacing * 0.5);
@paginationButtonWithTextPaddingHorizontal: @globalSpacing;
@paginationButtonWithTextPaddingMobile: calc(@globalSpacing * 0.75);

@paginationIconPrevColor: @neutralColors700;
@paginationIconNextColor: @primaryColors500;

@paginationPageSelectorGap: calc(@globalSpacing * 0.25);
@paginationPageSelectorFontSize: @fontSizeInPxXS;
@paginationPageSelectorLineHeight: @lineHeightInPxS;
@paginationPageSelectorColor: @globalFontColor;

If you want to change pagination styles, you can just change the variables. To change default pagination button font-size just modify @paginationButtonFontSize variable.

@paginationButtonFontSize: 20px;

Pagination standard styles

Standard pagination styles.

.pagination {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: @paginationGap;

    &__button {
        gap: @paginationButtonGap;

        .pixel-to-rem(font-size, @paginationButtonFontSize);
        .pixel-to-rem(line-height, @paginationButtonLineHeight);

        padding: @paginationButtonPadding;

        &_secondary {
            padding: @paginationButtonSmallPadding;

            @media screen and (max-width: @breakPointXs) {
                padding: @paginationButtonSmallPaddingMobile;
            }
        }

        &_with-text {
            padding-top: @paginationButtonWithTextPaddingVertical;
            padding-left: @paginationButtonWithTextPaddingHorizontal;
            padding-bottom: @paginationButtonWithTextPaddingVertical;
            padding-right: @paginationButtonWithTextPaddingHorizontal;

            @media screen and (max-width: @breakPointXs) {
                padding: @paginationButtonWithTextPaddingMobile;
            }
        }

        &-text {
            @media screen and (max-width: @breakPointXs) {
                display: none;
            }
        }
    }

    &__icon {
        &-prev {
            stroke: @paginationIconPrevColor;
        }

        &-next {
            stroke: @paginationIconNextColor;
        }
    }

    &__page-selector {
        display: flex;
        align-items: center;
        gap: @paginationPageSelectorGap;

        .pixel-to-rem(font-size, @paginationPageSelectorFontSize);
        .pixel-to-rem(line-height, @paginationPageSelectorLineHeight);

        color: @paginationPageSelectorColor;
    }
}

@media screen and (max-width: @breakPointXs) {
    .pagination {
        margin: 0 auto;
    }
}

Macros reference

Webcomponents reference