Pagination Indicates a series of related content existing across multiple pages.
Enable Component
Enable the pagination component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                pagination: true // Enable pagination component
            }
        }
    }
}
Basic Usage
Explore more examples from the previewer tab
<ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
NameDescription
.paginationApplies to the base element of the pagination
.pagination.pagination-softApplies the soft theme to the pagination
.pagination.pagination-subtleApplies the subtle theme to the pagination
.pagination.pagination-xsmApplies x small size to the pagination
.pagination.pagination-smApplies small size to the pagination
.pagination.pagination-lgApplies large size to the pagination
.pagination > .page-itemApplies to a single page item within a pagination
.pagination > .page-item.activeApplies to the active page item within a pagination
.pagination > .page-item.disabledApplies to a disabled page item within a pagination
.pagination > .page-item > .page-linkApplies to the clickable link of a single page item within a pagination
Customize variables at:/library/extend/components/_pagination.scss
Component's defaults:/library/components/pagination/_defaults.scss
NameDefault valueNote
$pagination-padding-y.532rem
$pagination-padding-x.75rem
$pagination-padding-y-xsm.125rem
$pagination-padding-x-xsm0.5rem
$pagination-padding-y-sm.282rem
$pagination-padding-x-sm.75rem
$pagination-padding-y-lg.688rem
$pagination-padding-x-lg1rem
$pagination-colorproperty.get(primary)Requires @use "@library/sass/modules/property";
$pagination-bgtransparent
$pagination-border-width$border-width
$pagination-border-radius$border-radius
$pagination-margin-start4px
$pagination-border-colorproperty.get(primary-t-16)Requires @use "@library/sass/modules/property";
$pagination-focus-colorproperty.get(primary)Requires @use "@library/sass/modules/property";
$pagination-focus-bgproperty.get(primary-t-08)Requires @use "@library/sass/modules/property";
$pagination-focus-box-shadow0 0 0 .20rem property.get(primary-t-08)Requires @use "@library/sass/modules/property";
$pagination-focus-outline0
$pagination-hover-colorproperty.get(primary)Requires @use "@library/sass/modules/property";
$pagination-hover-bgproperty.get(primary-t-04)Requires @use "@library/sass/modules/property";
$pagination-hover-border-colorproperty.get(primary-t-34)Requires @use "@library/sass/modules/property";
$pagination-active-colorproperty.get(primary)Requires @use "@library/sass/modules/property";
$pagination-active-bgproperty.get(primary-t-12)Requires @use "@library/sass/modules/property";
$pagination-active-border-colorproperty.get(primary-t-34)Requires @use "@library/sass/modules/property";
$pagination-disabled-colorproperty.get(primary-t-42)Requires @use "@library/sass/modules/property";
$pagination-disabled-bgtransparent
$pagination-disabled-border-colorproperty.get(primary-t-16)Requires @use "@library/sass/modules/property";
$pagination-transitioncolor .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
$pagination-init-soft-themetrue
$pagination-init-subtle-themetrue

Make sure to read the Customize components and Understanding and using the design system guides.

{title}