Modules

Pagination

This module helps to make the navigation through pages of content.

Usage #

Here's how to build page navigation.


<nav class="pagination">
    <ul class="pagination-list">
        <li class="pagination-item active">
            <a href="#" class="pagination-link">1</a>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link">2</a>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link">3</a>
        </li>
    </ul>
</nav>

You can add Next and Previous links.


<nav class="pagination">
    <ul class="pagination-list">
        <li class="pagination-item">
            <a href="#" class="pagination-link pagination-prev">&lt; Prev</a>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link">1</a>
        </li>
        <li class="pagination-item active">
            <a href="#" class="pagination-link">2</a>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link">3</a>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link pagination-next">Next &gt;</a>
        </li>
    </ul>
</nav>

Or make the page navigation only with Next and Previous links.


<nav class="pagination">
    <ul class="pagination-list">
        <li class="pagination-item">
            <a href="#" class="pagination-link pagination-prev">&lt; Prev</a>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link pagination-next">Next &gt;</a>
        </li>
    </ul>
</nav>

Use pagination-ellipsis for range separators.


<nav class="pagination">
    <ul class="pagination-list">
        <li class="pagination-item">
            <a href="#" class="pagination-link pagination-prev">&lt; Prev</a>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link">1</a>
        </li>
        <li class="pagination-item">
            <span class="pagination-ellipsis">&hellip;</span>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link">15</a>
        </li>
        <li class="pagination-item active">
            <a href="#" class="pagination-link">16</a>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link">17</a>
        </li>
        <li class="pagination-item">
            <span class="pagination-ellipsis">&hellip;</span>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link">28</a>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link pagination-next">Next &gt;</a>
        </li>
    </ul>
</nav>

Using the Spacing module and ml-auto class you can center the page numbers.


<nav class="pagination">
    <ul class="pagination-list">
        <li class="pagination-item">
            <a href="#" class="pagination-link pagination-prev">&lt; Prev</a>
        </li>
        <li class="pagination-item ml-auto">
            <a href="#" class="pagination-link">1</a>
        </li>
        <li class="pagination-item">
            <span class="pagination-ellipsis">&hellip;</span>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link">15</a>
        </li>
        <li class="pagination-item active">
            <a href="#" class="pagination-link">16</a>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link">17</a>
        </li>
        <li class="pagination-item">
            <span class="pagination-ellipsis">&hellip;</span>
        </li>
        <li class="pagination-item">
            <a href="#" class="pagination-link">28</a>
        </li>
        <li class="pagination-item ml-auto">
            <a href="#" class="pagination-link pagination-next">Next &gt;</a>
        </li>
    </ul>
</nav>

Scales #

You can add your own size or change an existing one by creating a modifier and specifying new pagination parameters in your custom SCSS.


.pagination-large {
    --pagination-font-size: var(--type-scale-20);
}

Now you have a new pagination-large size modifier.


<nav class="pagination pagination-large">...</nav>

Colors #

For the pagination module, you can override default colors. You can do this in your custom SCSS. See also how to customize the framework.


.pagination {
    --pagination-link-color: var(--palette-white);
    --pagination-link-background-color: var(--palette-black);
    --pagination-link-border-color: var(--palette-transparent);

    --pagination-link-hover-color: var(--palette-white-80);
    --pagination-link-hover-background-color: var(--palette-active-base);
    --pagination-link-hover-border-color: var(--palette-transparent);

    --pagination-link-active-color: var(--palette-active-lightest);
    --pagination-link-active-background-color: var(--palette-active-base);
    --pagination-link-active-border-color: var(--palette-transparent);
}

The result will be the pagination with changed colors without modifiers.


<nav class="pagination">...</nav>

Variants help you change the different properties of a module. For example, the spacing between menu items, padding, and so on. This can be done by changing module variables. See also how to customize the framework.


.pagination {
    --pagination-link-padding: 10px 16px;
    --pagination-link-border-width: 2px;
    --pagination-link-border-color: var(--palette-black);
    --pagination-link-hover-border-color: var(--palette-black);
}

If you apply the params above, the pagination will have bigger padding for links and a different border width and color than the default.


<nav class="pagination">...</nav>

Variables #

The default properties and colors of the module are shown below. These are all specified in the source of framework. This is here for clarity and to simplify modification and overriding of values.


--pagination-font-size: var(--type-scale-14);
--pagination-item-space: 1rem;
--pagination-link-min-width: 32px;
--pagination-link-border-width: 1px;
--pagination-link-padding: 6px 8px;
--pagination-link-border-radius: var(--radius-base);
--pagination-link-color: var(--palette-black);
--pagination-link-border-color: var(--palette-black-15);
--pagination-link-background-color: var(--palette-transparent);
--pagination-link-hover-color: var(--palette-black-60);
--pagination-link-hover-border-color: var(--palette-black-15);
--pagination-link-hover-background-color: var(--palette-transparent);
--pagination-link-active-color: var(--palette-active-lightest);
--pagination-link-active-border-color: var(--palette-active-base);
--pagination-link-active-background-color: var(--palette-active-base);