Card Pagination
Pagination wrapped in a raised card surface with page numbers and prev next controls. Groups navigation neatly below a list or grid of cards.
Pagination wrapped in a raised card surface with page numbers and prev next controls. Groups navigation neatly below a list or grid of cards.
Search blocks by description or jump to a page.
Card Pagination wraps a standard pagination row inside a raised card surface. The content area holds a Previous control on the left, a sequence of numbered page links, an ellipsis to signal skipped pages, the last visible page number, and a Next control on the right. Page two is shown as active in the demo so the highlight state is visible at a glance.
Every part of the row is independently editable. You can change the total page count, adjust which page is marked active, show or hide the ellipsis, and rewrite the labels on the Previous and Next controls without affecting the card frame or its shadow.
Reach for this block when pagination needs to feel like a deliberate UI element rather than a line of bare links. It works especially well below a candidate list, job board grid, or applicant table on an HR and hiring platform where the card surface groups the control with the content it belongs to. Compared to a borderless row, the card draws a clear boundary that prevents the controls from blending into surrounding elements.
A natural flow around it on a Components page:
Before
After
The card surface and controls each accept straightforward changes without restructuring the block:
Tip: if your list rarely exceeds three or four pages, remove the ellipsis and last page link so the row stays compact inside the card frame.