Search blocks by description or jump to a page.
Pagination that shows full page numbers on desktop and collapses to arrows on mobile. Keeps navigation usable across phones, tablets, and wide screens.
Responsive Pagination renders three distinct layouts inside a single component, each visible at a different breakpoint. On mobile, a left chevron, a plain "Page 2 of 8" text label, and a right chevron are the only controls shown, keeping the footprint as small as possible. On tablet, the row expands to show labeled Previous and Next buttons flanking a short run of page numbers (1, 2, 3) followed by an ellipsis and the last page. On desktop, the full sequence appears: five numbered pages, an ellipsis, the final page, and both labeled direction buttons. The active page is highlighted at every breakpoint.
The page count, active page, and total shown at each breakpoint are all independent. You can change the copy in the mobile label, add or remove numbered items in the tablet and desktop rows, and adjust the ellipsis position without the three layouts affecting each other.
This layout is the right choice whenever your course catalog, lesson list, or search results page needs navigation that works equally well for a student on a phone between classes and a teacher reviewing content on a wide monitor. The three tier approach means you never force mobile users to tap through a long row of numbers, and desktop users always see where they are in a deep result set. The compact pagination variant is a better fit when space is always tight regardless of screen width; reach for this block when the experience should scale up as screen real estate grows.
A natural flow around it on a Components page:
Before
After
The block covers three viewports with a single drop in, and each layer can be tuned independently:
Tip: wire the active page highlight and the mobile label to the same state variable so both update together when a learner navigates.