Component documentation

Basics

Components

Objects

Utilities

Default

#

1
2
3
4
5

<nav class="c-pagination" aria-label="Page navigation">
    <ul class="c-pagination__nav">
        <li class="c-pagination__item">
            <a class="c-button c-button--borderless c-button--icon" href="#" disabled="disabled">
                <span class="c-button__content">
                    <div class="o-svg-icon o-svg-icon-chevron-left  ">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M14.7071 5.29289C15.0976 5.68342 15.0976 6.31658 14.7071 6.70711L9.41421 12L14.7071 17.2929C15.0976 17.6834 15.0976 18.3166 14.7071 18.7071C14.3166 19.0976 13.6834 19.0976 13.2929 18.7071L7.29289 12.7071C6.90237 12.3166 6.90237 11.6834 7.29289 11.2929L13.2929 5.29289C13.6834 4.90237 14.3166 4.90237 14.7071 5.29289Z" fill="#595959" />
                        </svg>
                    </div>
                    <div class="u-sr-accessible">
                    </div>
                </span>
            </a>
        </li>
        <li class="c-pagination__item c-pagination__item--active">
            <a class="c-pagination__link" href="#">1</a>
        </li>
        <li class="c-pagination__item">
            <a class="c-pagination__link" href="#">2</a>
        </li>
        <li class="c-pagination__item">
            <a class="c-pagination__link" href="#">3</a>
        </li>
        <li class="c-pagination__item">
            <a class="c-pagination__link" href="#">4</a>
        </li>
        <li class="c-pagination__item">
            <a class="c-pagination__link" href="#">5</a>
        </li>
        <li class="c-pagination__item">
            <a class="c-button c-button--borderless c-button--icon" href="#">
                <span class="c-button__content">
                    <div class="o-svg-icon o-svg-icon-chevron-right  ">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M9.29289 18.7071C8.90237 18.3166 8.90237 17.6834 9.29289 17.2929L14.5858 12L9.29289 6.70711C8.90237 6.31658 8.90237 5.68342 9.29289 5.29289C9.68342 4.90237 10.3166 4.90237 10.7071 5.29289L16.7071 11.2929C17.0976 11.6834 17.0976 12.3166 16.7071 12.7071L10.7071 18.7071C10.3166 19.0976 9.68342 19.0976 9.29289 18.7071Z" fill="#595959" />
                        </svg>
                    </div>
                    <div class="u-sr-accessible">
                    </div>
                </span>
            </a>
        </li>
    </ul>
</nav>

nav.c-pagination(aria-label='Page navigation')
    ul.c-pagination__nav
        li.c-pagination__item
            +c-button({ href: '#', layout: 'icon-only', icon: 'chevron-left', skin: 'borderless'})(disabled)
        li.c-pagination__item.c-pagination__item--active
            a.c-pagination__link(href='#') 1
        li.c-pagination__item
            a.c-pagination__link(href='#') 2
        li.c-pagination__item
            a.c-pagination__link(href='#') 3
        li.c-pagination__item
            a.c-pagination__link(href='#') 4
        li.c-pagination__item
            a.c-pagination__link(href='#') 5
        li.c-pagination__item
            +c-button({ href: '#', layout: 'icon-only', icon: 'chevron-right', skin: 'borderless'})