Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass for fast coding and controlling and Saas compiler to make development faster.
A Pagination is a type of navigation that is used to go through the content that is divided into a series of similar pages. It allows users to click through the pages of search results and directly jump to a particular page by clicking on the page number. In this article, we will discuss Pagination in Foundation CSS.
Foundation CSS Pagination types:
- Basics: This is the basic type of pagination.
- Centered: This is the type of pagination that is centered.
Foundation CSS Pagination Classes:
- pagination: It is used to create the pagination panel with list items.
- pagination-previous: It is used to create the previous page link to go to the previous page.
- pagination-next: It is used to create the next page link to go to the next page.
Syntax:
<ul class="pagination">
<li>
<a href="#" aria-label="page1">
1
</a>
</li>
...
</ul>Example 1: The following code demonstrates the Pagination component.
<!DOCTYPE html> <html>
<head>
<title>Foundation CSS Pagination</title>
<!-- Compressed CSS -->
<link rel="stylesheet"
href=
</head>
<body>
<center>
<h2 style="color: green">
GeeksforGeeks
</h2>
<h3>
Foundation CSS Pagination
</h3>
<ul class="pagination">
<li class="pagination-previous disabled">
Previous
</li>
<li class="current">
<span class="show-for-sr">
Current Page is:
</span>
1
</li>
<li>
<a href="#" aria-label="Page-2">
2
</a>
</li>
<li>
<a href="#" aria-label="Page-3">
3
</a>
</li>
<li class="ellipsis" aria-hidden="true"></li>
<li>
<a href="#" aria-label="Page-7">
7
</a>
</li>
<li>
<a href="#" aria-label="Page-8">
8
</a>
</li>
<li class="pagination-next">
<a href="#" aria-label="Next">
Next
</a>
</li>
</ul>
</center>
</body>
</html>
|
Output:
Foundation CSS Pagination
Example 2: The following code demonstrates the Pagination that is left-aligned, center-aligned, and right-aligned. This can be done using the optional text-left, text-center, and text-right classes primarily used for aligning text.
<!DOCTYPE html> <html>
<head>
<title>Foundation CSS Pagination</title>
<!-- Compressed CSS -->
<link rel="stylesheet"
href=
</head>
<body>
<center>
<h2 style="color: green">
GeeksforGeeks
</h2>
<h3>
Foundation CSS Pagination
</h3>
<strong>
Left aligned:
</strong>
<ul class="pagination text-left">
<li class="pagination-previous disabled">
Previous
</li>
<li class="current">
<span class="show-for-sr">
Current Page is:
</span>
1
</li>
<li>
<a href="#" aria-label="Page-2">
2
</a>
</li>
<li class="ellipsis" aria-hidden="true">
</li>
<li>
<a href="#" aria-label="Page-7">
7
</a>
</li>
<li>
<a href="#" aria-label="Page-8">
8
</a>
</li>
<li class="pagination-next">
<a href="#" aria-label="Next">
Next
</a>
</li>
</ul><br>
<strong>
Center aligned:
</strong>
<ul class="pagination text-center">
<li class="pagination-previous disabled">
Previous
</li>
<li class="current">
<span class="show-for-sr">
Current Page is:
</span>
1
</li>
<li>
<a href="#" aria-label="Page-2">
2
</a>
</li>
<li class="ellipsis" aria-hidden="true"></li>
<li>
<a href="#" aria-label="Page-7">
7
</a>
</li>
<li>
<a href="#" aria-label="Page-8">
8
</a>
</li>
<li class="pagination-next">
<a href="#" aria-label="Next">
Next
</a>
</li>
</ul><br>
<strong>
Right aligned:
</strong>
<ul class="pagination text-right">
<li class="pagination-previous disabled">
Previous
</li>
<li class="current">
<span class="show-for-sr">
Current Page is:
</span>
1
</li>
<li>
<a href="#" aria-label="Page-2">
2
</a>
</li>
<li class="ellipsis" aria-hidden="true"></li>
<li>
<a href="#" aria-label="Page-7">
7
</a>
</li>
<li>
<a href="#" aria-label="Page-8">
8
</a>
</li>
<li class="pagination-next">
<a href="#" aria-label="Next">
Next
</a>
</li>
</ul>
</center>
</body>
</html>
|
Output:
Foundation CSS Pagination
Reference: https://get.foundation/sites/docs/pagination.html