Components

Pagination

Pagination helps to split content into several pages to avoid overloading the user with information. This guide explains how to use it.

Usage
  • Usage
  • Examples
  • Related component
  • Download

Usage

Pagination is mostly used for interfaces that have a lot of content, e.g. images on pages with limited vertical space. Content can be split up easily and navigation is simple. Pagination can also be used for text or a combination of both text and images.

There are different visual designs for image pagination, including different ways to position the interactive elements. For example, you can position them underneath or inside the image itself. Feel free to use either dots, boxes, numbers or image thumbnails. You can also use arrows inside or outside the images on the left and right side to jump to the previous or the next image.

Wide indicators below the content.

Wide indicators below on top of the content.

 

Dot shaped indicators below the content.

Numbered indicators with arrows below the content.

Image thumbnails below the content.

Image thumbnails on top of the content.

 

Arrow appearing next to the content when hovering a side area of the content. The wide indicators below the content signify that several pages are available so the arrows do not need to be visible permanently.

Arrow appearing on top of the content when hovering a side area of the content. The wide indicators on top of the content signify that several pages are available so the arrows do not need to be visible permanently.

Arrows placed permanently on top of to the content. If there are no additional element to signify that several pages are available and it is not obvious from context, arrows should be permanently visible, especially for touch device users, who won’t be able to discover the affordance through mouse hovers.

Examples

Related component

Download

Sketch UI Library
ZIP
85.97 MB