Pagination & carousel
Pagination for tables and lists, and carousel controls for marketing galleries.
In Figma
Section titled “In Figma”From guidelines/components/pagination.md
Properties, variants and anatomy of the Figma components.
Pagination
Section titled “Pagination”Pagination bar for tables and lists.
Variants: 2
| Property | Type / options |
|---|---|
| Type | Page numbers · Minimal |
Pagination number
Section titled “Pagination number”Page number cell.
Variants: 3
| Property | Type / options |
|---|---|
| Number | text |
| State | Default · Hover · Active |
Carousel
Section titled “Carousel”Image carousel with arrows and dots.
Variants: 4
| Property | Type / options |
|---|---|
| Type | Arrows inside · Arrows below |
| Breakpoint | Desktop · Mobile |
Carousel dots
Section titled “Carousel dots”Slide indicator.
Variants: 2
| Property | Type / options |
|---|---|
| Style | Default · Brand |
Pagination
Section titled “Pagination”Do
- Show the current page and the total.
- Keep Previous and Next visible.
- Use for tables over about 25 rows.
Forbidden
- Never paginate feeds — load more instead.
- Never show more than seven page numbers.
- Never reset the page when sorting.