Skip to content
Related Articles
Open in App
Not now

Related Articles

Primer CSS Numbered Pagination

Improve Article
Save Article
  • Last Updated : 28 Apr, 2022
Improve Article
Save Article

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.

HTML




<!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.

HTML




<!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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!