Element States
Default (Max Items)
Default (Max Items)
Font Size: 1rem (16px)
Font Weight: 400 / Book
Line Height: 1.5rem (24px)
Margin Left / Right: 0.3125rem (5px)
Active Items
Cursor: Pointer
Text Color: Emerson Green
Selected Item
Pointer Events: None
Text Color: Rich Black
Next Item Arrow
Margin Left: 0.9375rem (15px)
Previous Item Arrow
Margin Right: 0.9375rem (15px)
Visibility: Hidden
Default (Extended Items)
Default (Extended Items)
Ellipsis
Pointer Events: None
Text Color: Rich Black
Hover
Hover
Hover Item
Border Bottom: 1px Emerson Green
Font Weight: 500 / Medium
Selected (Double Ellipses)
Selected (Double Ellipses)
Ellipses
Pointer Events: None
Text Color: Rich Black
Selected (Last Item)
Selected (Last Item)
Next Item Arrow
Visibility: Hidden
Pagination should display a maximum of 9 indexed page links at any one time, and should always include the first and last page numbers available in the index.
When more than 9 pages of content are available in the index—or when the user has advanced far enough through the index to make displaying all items between the current page and the first page impossible—an ellipsis (...) should mask additional pages between the current page group (5 items: the currently selected page, plus the 2 pages before and 2 pages after) and the last and/or first page items.
NOTE: Each ellipsis should represent a minimum of 2 page items; refer to the "Default (Extended Items)" and "Selected (Double Ellipses)" element state examples above.
Examples of layouts that utilize the Pagination element include L012 Product Catalog, L019 Search Results and L021 News & Events.