| Page Properties | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Component Description
Use When
X
X
Don’t Use When
X
X
Related/Similar Components
X
X
Key Content
...
Item
...
Type
...
Notes
...
...
*Notes
Visual Style
X
Anatomy
...
Item
...
Type
...
Notes
...
1.
...
| Note |
|---|
Pagination is part of a larger ‘list controls' discussion that hasn’t concluded yet. |
Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.
Usage
Do’s
Use when there are too many results to show on a single page.
Your content can be logically split and splitting won’t cause context to be lost
Don’t
Paginate small lists
Anatomy
...
Item | Type | Notes |
|---|---|---|
1 | Button |
|
2 | Link |
|
3 | Truncation |
|
| Note |
|---|
I’m unsure from Ben’s designs what the behaviour of Truncation and ellipsis are. |
Key Content
Item | Type | Notes |
Link | Alt text |
|
Button | Alt text |
|
Behaviour
Progressive enhancement:
Non JS
I don’t think there is a non-Js version of pagination
Pagination could the non-JS fallback for other list types.
Links will navigate you to a new page of results.
Links open in the same window
The current page number is highlighted as the active page.
Editorial
X
X
X
Accessibility
...
Aria considerations
etc
Analytics & Data
X
X
Related/Similar Components
List controls
Load more
Carousel
Future Expansion
X
X
Wider Conversations that may impact this
...