Pagination helps to break down long lists into multiple sections that are indexed by a pagination component.


<!-- is-current highlights the currently selected page -->
<nav class="sgds-pagination" role="navigation" aria-label="pagination">
    <a class="sgds-pagination-previous">Previous</a>
    <ul class="sgds-pagination-list">
        <li class="sgds-pagination-link is-current">1</li>
        <li class="sgds-pagination-link">2</li>
        <li class="sgds-pagination-link">3</li>
    </ul>
    <a class="sgds-pagination-next">Next page</a>
</nav>

Rounded Pagination buttons

You can use .is-rounded to make all pagination buttons rounded.

<nav class="sgds-pagination is-rounded" role="navigation" aria-label="pagination">
    <a class="sgds-pagination-previous">Previous</a>
    <ul class="sgds-pagination-list">
        <li class="sgds-pagination-link is-current">1</li>
        <li class="sgds-pagination-link">2</li>
        <li class="sgds-pagination-link">3</li>
    </ul>
    <a class="sgds-pagination-next">Next</a>
</nav>

Customisable buttons

You can nest icons instead of text in the previous and next buttons by nesting child elements within the a tags.

<nav class="sgds-pagination" role="navigation" aria-label="pagination">
    <a class="sgds-pagination-previous"
        ><span class="sgds-icon sgds-icon-arrow-left is-size-5"></span
    ></a>
    <ul class="sgds-pagination-list">
        <li class="sgds-pagination-link">1</li>
        <li class="sgds-pagination-link is-current">2</li>
        <li class="sgds-pagination-link">3</li>
    </ul>
    <a class="sgds-pagination-next"
        ><span class="sgds-icon sgds-icon-arrow-right is-size-5"></span
    ></a>
</nav>

Style
Modifier Description
is-rounded Rounds the buttons of the pagination links

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Chat with the team