Description: The pagination allows the user to view set a amount of objects in the frame. The user can move forward or backward using the buttons.
508 Guidelines: The instructions in the title attribute of the anchor tag should be updated depending on the functionality of the pager.
TIP: To add icons to the pager, view the Selected Fontawesome Icons [PDF, 881KB], place the class inside the <i> tag then place that in the anchor tag.
<ul class="pager">
<li><a href="#" title="Press enter to load the previous page.">Previous</a></li>
<li><a href="#" title="Press enter to load the next page.">Next</i></a></li>
</ul>
Copy
<ul class="pager">
<li class="previous"><a href="#" title="Press enter to load the previous page."><i class="fa fa-chevron-left"></i><span class="sr-only">Previous</span></a></li>
<li class="next"><a href="#" title="Press enter to load the next page."><i class="fa fa-chevron-right"></i><span class="sr-only">Next</span></a></li>
</ul>
Copy
<ul class="pager">
<li class="disabled"><a href="#" title="Loading the previous page has been disabled, there is no previous page."><i class="fa fa-chevron-left"> Previous</i></a></li>
<li><a href="#" title="Press enter to load the next page.">Next <i class="fa fa-chevron-right"></i></a></li>
</ul>
Copy