Pagination
-
<div class="lp___pagination"> <div class="previous"><a href="">PREVIOUS</a></div> <div class="lp___pagination_number"> <ul> <li class="lp___pagination_link"><a href="">1</a></li> <li class="lp___pagination_link"><a href="">2</a></li> <li class="lp___pagination_link"><a href="">3</a></li> <li class="lp___pagination_link"><a href="">4</a></li> <li class="lp___pagination_link"><a href="">5</a></li> </ul> </div> <div class="next"><a href="">NEXT</a></div> </div> -
Use:
On a dedicated listing page, or an extended news or feature story page where the content extends beyond the point of comfortable scrolling.
Don't use:
On pages that are populated with non-static content either above or below the content being "paged" through.
Visual Style:
A pagination component should be placed at the bottom of the page, aligned with the center the content being "Paged" through. On the left and right the "previous" and "next" links allow the user to proceed forward and backward, while the numbers in between allow for faster jumping through content.
Behavior:
If the number of pages exceeds five, after the third page the page numbers will count up with the center number being the current page. For example, if you were on page 13, the pagination component should read "< previous 11 12 13 14 15 Next >".
- EXAMPLE