UCLA Component Library

Buttons: Pagination 

<!-- Pagination (Boxed) -->
<ul class="pagination--boxed">
    <li><a class="page" href="#">&laquo;</a></li>
    <li><a class="page page--current" href="#">1</a></li>
    <li><a class="page" href="#">2</a></li>
    <li><a class="page" href="#">3</a></li>
    <li><a class="page" href="#">4</a></li>
    <li><a class="page" href="#">5</a></li>
    <li><a class="page" href="#">6</a></li>
    <li><a class="page" href="#">7</a></li>
    <li><a class="page" href="#">&raquo;</a></li>
</ul>

<!-- Pagination (Unboxed) -->
<ul class="pagination">
    <li><a class="page" href="#">&laquo;</a></li>
    <li><a class="page page--current" href="#">1</a></li>
    <li><a class="page" href="#">2</a></li>
    <li><a class="page" href="#">3</a></li>
    <li><a class="page" href="#">4</a></li>
    <li><a class="page" href="#">5</a></li>
    <li><a class="page" href="#">6</a></li>
    <li><a class="page" href="#">7</a></li>
    <li><a class="page" href="#">&raquo;</a></li>
</ul>