Short description

We use pagination to divide data into several pages and let the user navigate between them. By doing this we prevent pages from becoming too long and overwhelming. Pagination is similar to physical books with page numbers.

When and how to use it

Use it when you have a lot of data that can't be easily presented on one screen. Divide the data automatically with an algorithm that adjusts the data to the amount of space it is given.

The placement of the component varies but is very important. The component should be placed at the top and the bottom of the data set, if the amount of data is so long that the user can't see the top and the bottom at the same time. By doing so you eliminate the unnecessary activity of scrolling up and down only to navigate between pages. If the user can see the top and the bottom at the same time it is enough with placing the component at the bottom or the top.

Behaviour

The pagination component is transparent so that it can be discretely placed on both a grey or white background. The first and last pages are always visible in the component. This gives the user an understanding of the total amount of data. The page that the user is currently viewing is identified by a dark grey square that is not clickable. All of the other squares are transparent and clickable. If the user hovers a square a discrete shadow appears around the square. There are two squares with arrows, they help the user to navigate to the next or the previous page.

It can be a good idea to combine pagination with filtering and the possibility to search within the data set. If the user needs to be able to jump straight to a page there is an optional component that is placed on the right-hand side that allows the user to enter a page number and go straight there.

Placement

Default placement is under the data-set to the left. However, place it where it makes sense (left, centered, right) related to other components and layout of content. If the data-set is so long that user has to scroll to see it, place a pagination both at the bottom and the top, or perhaps sticky to the bottom.

Do's and don'ts

• Use pagination when the data set is so big that it can overwhelm the user.
• Present the component with a lot of page numbers if you have the space for it.
• If possible, offer the user the possibility to filter or search within the data set.

• Avoid placing the component at only the bottom or the top if the user has to scroll to see the component.
• Don't make the data sets on each page to small

Measurements for pagination

Large

Height 44 px

• Minimum width: 44 px, after that the square grows dynamically if the number is higher than 999
• Padding: 4 px on the left and right side
• Arrow: 16x16 px
• Margin between two squares in the complete component: 4 px
• Margin between the squares and “Go to page”: 16 px

Small

Height 32 px

• Minimum width: 32 px, after that the square grows dynamically if the number is higher than 99
• Padding: 4 px on the left and right side
• Arrow: 16x16 px
• Margin between two squares in the complete component: 4 px
• Margin between the squares and “Go to page”: 16 px

Measurements for Pagination

Measurements for Go to page

Large

Height 44 px

• Input field width: 96 px
• Arrow: 16x16 px. Placed 8 px from the right side of the input field’s edge
• Margin between the space for input text and the arrow: 4 px
• The input text is placed 8 px from the left side of the input fields edge
• “Go to page” is placed 10 px from the input field

Small

Height 32 px

• Input field width: 84 px
• Arrow: 16x16 px. Placed 8 px from the right side of the input field’s edge
• Margin between the space for input text and the arrow: 4 px
• Input text is placed 8 px from the left side of the input fields edge
• “Go to page” is placed 10 px from the input field

Measurements for Go to page

Small and large

Measurements for the complete component

• The margin inbetween squares: 4 px
• The margin between the squares and “Go to page”: 32 px

Overall measurements

States for pagination square

Pagination square

Default

• No fill
• No border or shadow
• Font: 16 regular, line height 24 for large, 14 regular, line height 24 for small
• Chevron icon: chevron-left or chevron-right, regular, SEB base 800 (#333333)

Hover

• No fill
• Box-shadow: 0px 2px 6px 0px rgba(0, 0, 0 , 0, .15)
• Font: 16 medium, line height 24 for large, 14 medium, line height 24 for small
• Chevron icon: chevron-left or chevron-right, regular, SEB base 800 (#333333)

Selected

• Fill: SEB base 800 (#333333)
• No border or shadow
• Font: 16 medium, line height 24 for large, 14 medium, line height 24 for small

Focus

• No fill
• Border-color: Blue Dark 2
• Box-shadow: 0px 0px 2px 2px #007ac7, 0 0 4px 2px rgba(0, 122, 199, 0.4)
• Font: 16 medium, line height 24 for large, 14 medium, line height 24 for small
• Chevron icon: chevron-left or chevron-right, regular, SEB base 800 (#333333)

Disabled

• No fill
• No border or shadow
• Chevron icon: chevron-left or chevron-right, regular, SEB base 500 (#adadad)

States for pagination

States for Go to page

Go to page

Default

• Fill: SEB Base-white (#ffffff)
• border-color: SEB Base-400 (#c4c4c4), 1 px Font: 16 regular, line height 24 for large, 14 regular, line height 24 for small Arrow icon: Arrow-right, regular, SEB base 800 (#333333)

Hover

• Fill: SEB Base-white (#ffffff)
• Border-color: SEB Blue (#41b0ee), 1 px
• Font: 16 regular, line height 24 for large, 14 regular, line height 24 for small
• Arrow icon: Arrow-right, regular, SEB base 800 (#333333)

Active

• Fill: SEB Base-white (#ffffff)
• Border-color: SEB Blue (#41b0ee), 1 px
• Font: 16 regular, line height 24 for large, 14 regular, line height 24 for small
• Arrow icon: Arrow-right, regular, SEB base 800 (#333333)

Focus

• Fill: SEB Base-white (#ffffff)
• Border-color: SEB Blue Dark 2 (#007ac7), 1 px
• Box-shadow: 0px 0px 2px 2px #007ac7, 0 0 4px 2px rgba(0, 122, 199, 0.4)
• Font: 16 regular, line height 24 for large, 14 regular, line height 24 for small
• Arrow icon: Arrow-right, regular, SEB base 800 (#333333)

States for go to page

Colours

• Grey 500
• Grey 800
• White
• Grey 400
• Blue
• Dark blue 2