Primer CSS Previous/Next Pagination
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.
Primer CSS offers Previous/next Pagination that can be made using the previous and next button by adding an aria-disabled=”true” attribute to the previous button if there is no previous page available or to the next button if there is no next page available.
Primer CSS Previous/Next Pagination used classes:
- previous_page: This class is used to create a previous arrow icon.
- next_page: This class is used to create a previous arrow icon.
Syntax:
<nav class="paginate-container" aria-label="Pagination">
<div class="pagination">
<span class="previous_page">
...
</span>
<a class="next_page" rel="next" href="#"
aria-disabled="true" aria-label="Next Page">
...
</a>
</div>
</nav>
Example 1: This example demonstrates the use of Primer CSS Previous/Next Pagination with aria-disabled=”true” attribute for the next button.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS offers Previous/next Pagination </title> <link rel="stylesheet" href= </head> <body> <center> <h1 class="color-fg-open"> GeeksforGeeks </h1> <h4>Primer CSS offers Previous/next Pagination</h4> <nav class="paginate-container" aria-label="Pagination"> <div class="pagination"> <span class="previous_page">Older</span> <a class="next_page" aria-disabled="true" href="#" aria-label="Next Page">Newer </a> </div> </nav> </center> </body> </html> |
Output:
Primer CSS Previous/Next Pagination
Example 2: This is another example that demonstrates the use of Primer CSS Previous/Next Pagination with aria-disabled=”true” attribute for the previous button.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS offers Previous/next Pagination </title> <link rel="stylesheet" href= </head> <body> <center> <h1 class="color-fg-open"> GeeksforGeeks </h1> <h4>Primer CSS offers Previous/next Pagination</h4> <nav class="paginate-container" aria-label="Pagination"> <div class="pagination"> <span class="previous_page" aria-disabled="true"> Older </span> <a class="next_page" href="#" aria-label="Next Page"> Newer </a> </div> </nav> </center> </body> </html> |
Output:
Primer CSS Previous/Next Pagination
Reference: https://primer.style/css/components/pagination#previousnext-pagination
Please Login to comment...