Start Here
Introduction
Download
Syntax
Core Concepts
Aspect Ratio
Border Radius
Border Size
Border Style
Cursor
Display
Flex
Flex Alignment
Flex Direction
Flex Grow
Flex Position
Flex Size
Flex Width
Font
Gap
Height
Margin
Padding
Spacing
Width
UI Effects
Animations
Single Box
Multi Box
3D Box
Other
Box Shadows
OutSet Shadow
InSet Shadow
Text Shadow
OutSet Shadow
InSet Shadow
UI Widgets
Accordion
Buttons
Calendar
Card
Checks & Radio
Data Tables
DropDown
DropDown Multi Select
Gallery
Pagination
Pop-Up
Progress Bar
Skeleton
Spinners
Suggestion
Tabs
Toasts
Slider
Text Boxes
Text Editor
Tool Tip
Icons
Theme Color Shade
Color Shade
Text Color
Background Color
Border Color
Gradient
Text Gradient
Single Color
Double Color
Triple Color
Background Gradient
Single Color
Double Color
Triple Color
Border Gradient
Single Color
Double Color
Triple Color
Other Pages
Landing Pages
Top Nav 1
Top Nav 2
Side Nav 1
Login 1
Forget Password
Apps
Add Data
Nav First Level
Nav Second Level
Nav Third Level
N
A
V

Pagination

Effortless Navigation

Enhance user experience with seamless pagination. Easily browse through content without overwhelming users with too much information at once. Our pagination system ensures smooth transitions and an intuitive interface for efficient navigation.

Pagination Features:

  • Dynamic Loading: Fetch and display content progressively for a smooth browsing experience.
  • Customizable Styles: Adjust pagination appearance to match your design aesthetics.
  • Efficient Navigation: Users can quickly move between pages without delays.
  • SEO-Friendly: Ensures proper indexing for improved search engine visibility.
  • Adaptive Design: Works seamlessly across different screen sizes and devices.
  • Accessibility Ready: Designed to be inclusive for all users, including those with disabilities.

Pagination

The Pagination component helps break long lists of content (like products, blog posts, or images) into smaller, manageable pages. It allows users to move between pages using page numbers or next/previous buttons.

Key Features

  • Divides content into pages (e.g., 10 items per page)
  • Shows page numbers (1, 2, 3, etc.)
  • Has Previous and Next buttons
  • Highlights the current page
Prev
1
2
3
4
5
Next
Source Code 

<div class="DyIeBk">
    <div class="LtSeNe DyFx Mn0 Pg0">
        <div class="Br1 CrBrTe80Lt DyFx Pg0"><a class="PgTpBm10 PgLtRt15" href="#">Prev</a></div>
        <div class="Br1 CrBrTe80Lt DyFx Pg0 CrBdBe"><a class="PgTpBm10 PgLtRt15" href="#">1</a></div>
        <div class="Br1 CrBrTe80Lt DyFx Pg0"><a class="PgTpBm10 PgLtRt15" href="#">2</a></div>
        <div class="Br1 CrBrTe80Lt DyFx Pg0"><a class="PgTpBm10 PgLtRt15" href="#">3</a></div>
        <div class="Br1 CrBrTe80Lt DyFx Pg0"><a class="PgTpBm10 PgLtRt15" href="#">4</a></div>
        <div class="Br1 CrBrTe80Lt DyFx Pg0"><a class="PgTpBm10 PgLtRt15" href="#">5</a></div>
        <div class="Br1 CrBrTe80Lt DyFx Pg0"><a class="PgTpBm10 PgLtRt15" href="#">Next</a></div>
    </div>
</div>

Sizing

The Sizing utility provides predefined classes to control the width, height, and maximum or minimum sizes of elements. It helps maintain consistency and responsiveness across layouts.

Prev
1
2
3
4
5
Next
Source Code 

<div class="DyIeBk">
    <div class="LtSeNe DyFx Mn0 Pg0">
        <div class="Br1 CrBrTe80Lt DyFx Pg0"><a class="PgTpBm10 PgLtRt15 FtSe20" href="#">Prev</a></div>
        <div class="Br1 CrBrTe80Lt DyFx Pg0 CrBdBe"><a class="PgTpBm10 PgLtRt15 FtSe20" href="#">1</a></div>
        <div class="Br1 CrBrTe80Lt DyFx Pg0"><a class="PgTpBm10 PgLtRt15 FtSe20" href="#">2</a></div>
        <div class="Br1 CrBrTe80Lt DyFx Pg0"><a class="PgTpBm10 PgLtRt15 FtSe20" href="#">3</a></div>
        <div class="Br1 CrBrTe80Lt DyFx Pg0"><a class="PgTpBm10 PgLtRt15 FtSe20" href="#">4</a></div>
        <div class="Br1 CrBrTe80Lt DyFx Pg0"><a class="PgTpBm10 PgLtRt15 FtSe20" href="#">5</a></div>
        <div class="Br1 CrBrTe80Lt DyFx Pg0"><a class="PgTpBm10 PgLtRt15 FtSe20" href="#">Next</a></div>
    </div>
</div>
Web Tool
Celebrate Tech © 2008 - 2024
Welcome Amit
  Logout
  Change Password
  Change Email

Loading...