Pagination

Create custom branded pagination by using the pagination color mixin: @include pagination-color($color, $border-color, $background-color).

Note: The page-is-disabled CSS class on the pagination--list-item includes the pointer-events: none CSS declaration which disables the click event but not keyboard events. You may still want to disable the link via JS.

Base

<div class="pagination">
    <ul class="pagination--list">
        <li class="pagination--list-item page-is-disabled"><a href="#" class="pagination--link">First</a></li>
        <li class="pagination--list-item page-is-disabled"><a href="#" class="pagination--link">Prev</a></li>
        <li class="pagination--list-item page-is-current"><a href="#" class="pagination--link">1</a></li>
        <li class="pagination--list-item"><a href="#" class="pagination--link">Next</a></li>
        <li class="pagination--list-item"><a href="#" class="pagination--link">Last</a></li>
    </ul>
</div>

Colors

Primary Color

<div class="pagination pagination--primary-color">
    <ul class="pagination--list">
        <li class="pagination--list-item page-is-disabled"><a href="#" class="pagination--link">First</a></li>
        <li class="pagination--list-item page-is-disabled"><a href="#" class="pagination--link">Prev</a></li>
        <li class="pagination--list-item page-is-current"><a href="#" class="pagination--link">1</a></li>
        <li class="pagination--list-item"><a href="#" class="pagination--link">Next</a></li>
        <li class="pagination--list-item"><a href="#" class="pagination--link">Last</a></li>
    </ul>
</div>

Secondary Color

<div class="pagination pagination--secondary-color">
    <ul class="pagination--list">
        <li class="pagination--list-item page-is-disabled"><a href="#" class="pagination--link">First</a></li>
        <li class="pagination--list-item page-is-disabled"><a href="#" class="pagination--link">Prev</a></li>
        <li class="pagination--list-item page-is-current"><a href="#" class="pagination--link">1</a></li>
        <li class="pagination--list-item"><a href="#" class="pagination--link">Next</a></li>
        <li class="pagination--list-item"><a href="#" class="pagination--link">Last</a></li>
    </ul>
</div>

Tertiary Color

<div class="pagination pagination--tertiary-color">
    <ul class="pagination--list">
        <li class="pagination--list-item page-is-disabled"><a href="#" class="pagination--link">First</a></li>
        <li class="pagination--list-item page-is-disabled"><a href="#" class="pagination--link">Prev</a></li>
        <li class="pagination--list-item page-is-current"><a href="#" class="pagination--link">1</a></li>
        <li class="pagination--list-item"><a href="#" class="pagination--link">Next</a></li>
        <li class="pagination--list-item"><a href="#" class="pagination--link">Last</a></li>
    </ul>,
</div>

Breakpoints

Resize your browser to show and hide pagination links at different breakpoints. The number of links you can show at different breakpoints is:

Base: 1
XXS: 2
XS: 3
SM: 8
MD: 12
LG: 15
XL: 20
XXL: 25

First
Prev
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Next
Last

<ul class="pagination--list">
    <li class="pagination--list-item page--first page-is-disabled"><a href="#" class="pagination--link"><span class="arrow arrow--left"></span><span class="arrow arrow--left"></span> <span class="sr-only">First</span></a></li>
    <li class="pagination--list-item page--prev page-is-disabled"><a href="#" class="pagination--link"><span class="arrow arrow--left"></span> <span class="sr-only">Prev</span></a></li>
    <li class="pagination--list-item page-is-current"><a href="#" class="pagination--link">1</a></li>
    <li class="pagination--list-item pagination--list-item--xxs"><a href="#" class="pagination--link">2</a></li>
    <li class="pagination--list-item pagination--list-item--xs"><a href="#" class="pagination--link">3</a></li>
    <li class="pagination--list-item pagination--list-item--xs"><a href="#" class="pagination--link">4</a></li>
    <li class="pagination--list-item pagination--list-item--xs"><a href="#" class="pagination--link">5</a></li>
    <li class="pagination--list-item pagination--list-item--sm"><a href="#" class="pagination--link">6</a></li>
    <li class="pagination--list-item pagination--list-item--sm"><a href="#" class="pagination--link">7</a></li>
    <li class="pagination--list-item pagination--list-item--sm"><a href="#" class="pagination--link">8</a></li>
    <li class="pagination--list-item pagination--list-item--md"><a href="#" class="pagination--link">9</a></li>
    <li class="pagination--list-item pagination--list-item--md"><a href="#" class="pagination--link">10</a></li>
    <li class="pagination--list-item pagination--list-item--md"><a href="#" class="pagination--link">11</a></li>
    <li class="pagination--list-item pagination--list-item--md"><a href="#" class="pagination--link">12</a></li>
    <li class="pagination--list-item pagination--list-item--lg"><a href="#" class="pagination--link">13</a></li>
    <li class="pagination--list-item pagination--list-item--lg"><a href="#" class="pagination--link">14</a></li>
    <li class="pagination--list-item pagination--list-item--lg"><a href="#" class="pagination--link">15</a></li>
    <li class="pagination--list-item pagination--list-item--xl"><a href="#" class="pagination--link">16</a></li>
    <li class="pagination--list-item pagination--list-item--xl"><a href="#" class="pagination--link">17</a></li>
    <li class="pagination--list-item pagination--list-item--xl"><a href="#" class="pagination--link">18</a></li>
    <li class="pagination--list-item pagination--list-item--xl"><a href="#" class="pagination--link">19</a></li>
    <li class="pagination--list-item pagination--list-item--xl"><a href="#" class="pagination--link">20</a></li>
    <li class="pagination--list-item pagination--list-item--xxl"><a href="#" class="pagination--link">21</a></li>
    <li class="pagination--list-item pagination--list-item--xxl"><a href="#" class="pagination--link">22</a></li>
    <li class="pagination--list-item pagination--list-item--xxl"><a href="#" class="pagination--link">23</a></li>
    <li class="pagination--list-item pagination--list-item--xxl"><a href="#" class="pagination--link">24</a></li>
    <li class="pagination--list-item pagination--list-item--xxl"><a href="#" class="pagination--link">25</a></li>
    <li class="pagination--list-item page--next"><a href="#" class="pagination--link"><span class="sr-only">Next</span> <span class="arrow arrow--right"></span></a></li>
    <li class="pagination--list-item page--last"><a href="#" class="pagination--link"><span class="sr-only">Last</span> <span class="arrow arrow--right"></span><span class="arrow arrow--right"></span></a></li>
</ul>