### Basic Pagination

Navigate through pages of content.

#### Simple Pagination

HTML

    <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li class="pagination__item">
                        <a href="#" class="pagination__link" aria-label="Previous">
                            ←
                        </a>
                    </li>
                    <li class="pagination__item">
                        <a href="#" class="pagination__link">1</a>
                    </li>
                    <li class="pagination__item pagination__item--active">
                        <a href="#" class="pagination__link" aria-current="page">
                            2
                        </a>
                    </li>
                    <li class="pagination__item">
                        <a href="#" class="pagination__link">3</a>
                    </li>
                    <li class="pagination__item">
                        <a href="#" class="pagination__link" aria-label="Next">
                            →
                        </a>
                    </li>
                </ul>
            </nav>

#### With First/Last

HTML

    <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li class="pagination__item">
                        <a href="#" class="pagination__link" aria-label="First">
                            ««
                        </a>
                    </li>
                    <li class="pagination__item">
                        <a href="#" class="pagination__link" aria-label="Previous">
                            «
                        </a>
                    </li>
                    <li class="pagination__item">
                        <a href="#" class="pagination__link">1</a>
                    </li>
                    <li class="pagination__item pagination__item--active">
                        <a href="#" class="pagination__link" aria-current="page">
                            2
                        </a>
                    </li>
                    <li class="pagination__item">
                        <a href="#" class="pagination__link">3</a>
                    </li>
                    <li class="pagination__item">
                        <a href="#" class="pagination__link" aria-label="Next">
                            »
                        </a>
                    </li>
                    <li class="pagination__item">
                        <a href="#" class="pagination__link" aria-label="Last">
                            »»
                        </a>
                    </li>
                </ul>
            </nav>

### Pagination States

Disabled and active states.

#### Disabled Items

HTML

    <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li class="pagination__item pagination__item--disabled">
                        <a
                            href="#"
                            class="pagination__link"
                            tabindex="-1"
                            aria-disabled="true"
                        >
                            Previous
                        </a>
                    </li>
                    <li class="pagination__item pagination__item--active">
                        <a href="#" class="pagination__link" aria-current="page">
                            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>
                    <li class="pagination__item">
                        <a href="#" class="pagination__link">Next</a>
                    </li>
                </ul>
            </nav>

### Pagination Sizes

Different size variations.

#### Size Variations

HTML

    <nav aria-label="Small pagination">
                <ul class="pagination pagination--sm">
                    <li class="pagination__item">
                        <a href="#" class="pagination__link">«</a>
                    </li>
                    <li class="pagination__item 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">»</a>
                    </li>
                </ul>
            </nav>

            <nav aria-label="Default pagination" class="mt--02">
                <ul class="pagination">
                    <li class="pagination__item">
                        <a href="#" class="pagination__link">«</a>
                    </li>
                    <li class="pagination__item 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">»</a>
                    </li>
                </ul>
            </nav>

            <nav aria-label="Large pagination" class="mt--02">
                <ul class="pagination pagination--lg">
                    <li class="pagination__item">
                        <a href="#" class="pagination__link">«</a>
                    </li>
                    <li class="pagination__item 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">»</a>
                    </li>
                </ul>
            </nav>

### Pagination Alignment

Different alignment options.

#### Centered

HTML

    <nav aria-label="Centered pagination">
                <ul class="pagination pagination--center">
                    <li class="pagination__item">
                        <a href="#" class="pagination__link">«</a>
                    </li>
                    <li class="pagination__item 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>
                    <li class="pagination__item">
                        <a href="#" class="pagination__link">»</a>
                    </li>
                </ul>
            </nav>

#### Right Aligned

HTML

    <nav aria-label="Right aligned pagination">
                <ul class="pagination pagination--end">
                    <li class="pagination__item">
                        <a href="#" class="pagination__link">«</a>
                    </li>
                    <li class="pagination__item 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>
                    <li class="pagination__item">
                        <a href="#" class="pagination__link">»</a>
                    </li>
                </ul>
            </nav>

### Ellipsis Pagination

Truncated pagination for many pages.

#### With Ellipsis

HTML

    <nav aria-label="Ellipsis pagination">
                <ul class="pagination">
                    <li class="pagination__item">
                        <a href="#" class="pagination__link">«</a>
                    </li>
                    <li class="pagination__item">
                        <a href="#" class="pagination__link">1</a>
                    </li>
                    <li class="pagination__item pagination__item--ellipsis">
                        <span>…</span>
                    </li>
                    <li class="pagination__item">
                        <a href="#" class="pagination__link">4</a>
                    </li>
                    <li class="pagination__item pagination__item--active">
                        <a href="#" class="pagination__link">5</a>
                    </li>
                    <li class="pagination__item">
                        <a href="#" class="pagination__link">6</a>
                    </li>
                    <li class="pagination__item pagination__item--ellipsis">
                        <span>…</span>
                    </li>
                    <li class="pagination__item">
                        <a href="#" class="pagination__link">20</a>
                    </li>
                    <li class="pagination__item">
                        <a href="#" class="pagination__link">»</a>
                    </li>
                </ul>
            </nav>

### Simple Navigation

Previous/Next only pagination.

#### Prev/Next with Labels

HTML

    <nav aria-label="Simple pagination">
                <ul class="pagination pagination--simple">
                    <li class="pagination__item">
                        <a href="#" class="pagination__link">
                            <span>← Previous</span>
                        </a>
                    </li>
                    <li class="pagination__item">
                        <a href="#" class="pagination__link">
                            <span>Next →</span>
                        </a>
                    </li>
                </ul>
            </nav>

#### Page Info

HTML

    <nav aria-label="Pagination with info" class="pagination__wrapper">
                <span class="pagination__info">Page 5 of 20</span>
                <ul class="pagination">
                    <li class="pagination__item">
                        <a href="#" class="pagination__link">Previous</a>
                    </li>
                    <li class="pagination__item">
                        <a href="#" class="pagination__link">Next</a>
                    </li>
                </ul>
            </nav>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!