Primer CSS is open-source on Github that is created with GitHub’s design system. We can use Primer CSS by installing it via npm or include the CDN link in our HTML file. It has different types of styles like spacing, color, and typography.
Primer CSS Pagination is used to jump to any related page using the link. Primer CSS Numbered Pagination is used to create the numbered pages to navigate to any page number.
In this article, we will discuss Primer CSS Numbered Pagination.
Primer CSS Numbered Pagination Classes:
- paginate-container: This class is used to create the pagination container.
- pagination: This class is used to create pagination.
Primer CSS Numbered Pagination Attributes:
- aria-disabled=”true”: This attribute is used to add the Previous button if you’re on the first page.
- aria-current=”page”: This attribute is apply on the current numbered page.
- aria-label=”Pagination”: Add this attribute to the paginate-container element.
- aria-label=”Page X”: Add this attribute to the each anchor link.
Syntax:
<nav class="paginate-container">
<div class="pagination">
<a href="#" aria-label="Page-1">
1
</a>
....
</div>
</nav>Example 1: The following code demonstrates the Primer CSS Numbered Pagination.
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
<div class="text-center">
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3> Primer CSS Numbered Pagination </h3>
</div> <br>
<div class="d-flex flex-justify-center">
<nav class="paginate-container">
<div class="pagination">
<em aria-current="page"> 1 </em>
<a href="#" aria-label="Page-2"> 2 </a>
<a href="#" aria-label="Page-3"> 3 </a>
</div>
</nav>
</div>
</body>
</html>
|
Output:
Primer CSS Numbered Pagination
Example 2: The following code demonstrates the Primer CSS Numbered Pagination.
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
<div class="text-center">
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3> Primer CSS Numbered Pagination </h3>
</div> <br>
<div class="d-flex flex-justify-center">
<nav class="paginate-container">
<div class="pagination">
<span class="previous_page" aria-disabled="true">
Previous
</span>
<em aria-current="page"> 1 </em>
<a href="#" aria-label="Page-2"> 2 </a>
<a href="#" aria-label="Page-3"> 3 </a>
<a href="#" aria-label="Page-4"> 4 </a>
<span class="gap"> … </span>
<a href="#" aria-label="Page-12"> 12 </a>
<a href="#" aria-label="Page-13"> 13 </a>
<a class="next_page" href="#" aria-label="Next">
Next
</a>
</div>
</nav>
</div>
</body>
</html>
|
Output:
Primer CSS Numbered Pagination
Reference: https://primer.style/css/components/pagination#numbered-pagination