--- title: "Pager | GoodBarber's Design System" description: "The Pager shows the current position in a carousel in GoodBarber apps: one filled circle for the item on screen, and smaller dots for the ones around it." canonical_url: "https://www.goodbarber.com/uxdesign/pager/" lang: fr --- # Pager | GoodBarber's Design System [Design System](https://fr.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [https://fr.goodbarber.com/uxdesign/](https://fr.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [Overview](https://fr.goodbarber.com/uxdesign/) - [Foundations](/uxdesign/foundations/) * Layout + [Grid](/uxdesign/grid/) + [Spacing](/uxdesign/spacing/) + [Breakpoints](/uxdesign/breakpoints/) + [Layers](/uxdesign/layers/) * Graphic elements + [Color](/uxdesign/color/) + [Typography](/uxdesign/typography/) + [Images Aspect Ratios](/uxdesign/images-aspect-ratios/) + [Icons](/uxdesign/icons/) - [Atomic Components](/uxdesign/atomic-components/) * [Color atom](/uxdesign/atom-color/) * [Font atom](/uxdesign/atom-font/) * [Image atom](/uxdesign/atom-image/) * [Gradient atom](/uxdesign/atom-gradient/) * [Shape atom](/uxdesign/atom-shape/) * [Shadow atom](/uxdesign/atom-shadow/) * [Size atom](/uxdesign/atom-size/) * [Border atom](/uxdesign/atom-border/) * [Blur atom](/uxdesign/atom-blur/) * [Overlay atom](/uxdesign/atom-overlay/) * [Immersive feedback atom](/uxdesign/atom-immersive-feedback/) - [UI Elements](/uxdesign/ui-elements/) * [Distance](/uxdesign/distance/) * [Duration](/uxdesign/duration/) * [Item](/uxdesign/item/) * [Item Icon](/uxdesign/item-icon/) * [Item Indicator](/uxdesign/item-indicator/) * [Item Label](/uxdesign/item-label/) * [Pager](/uxdesign/pager/) * [Play](/uxdesign/play/) - [UI Components](/uxdesign/ui-components/) * [Background](/uxdesign/background/) * [Text Field](/uxdesign/textfield/) * [Dropdown](/uxdesign/dropdown/) * [Date & Time Picker](/uxdesign/date-time-picker/) * [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/) * [Button](/uxdesign/button/) * [Thumbnail](/uxdesign/thumbnail/) * [Form](/uxdesign/form/) * [TabBar](/uxdesign/tabbar/) # Pager UI Elements The Pager shows where you are in a carousel: one filled circle for the item on screen, smaller dots around it. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/pager.ecaeaf0b3e27.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/pager.ecaeaf0b3e27.mp4) ## Introduction The Pager shows users where they are within a list or a slideshow that scrolls horizontally. It gives quick navigation feedback, and helps people keep their bearings inside a carousel of content. It is a series of circles and dots, and it is read at a glance: the item on screen is the large filled circle, and the dots around it stand for the items on either side. ## Anatomy ### Circles and dots A Pager is a series of circles and dots, and each item has its own fixed diameter. | Item | Diameter | How many | | ------------------- | -------- | -------- | | Selected item | 8 px | 1 | | Adjacent items | 6 px | up to 4 | | Overflow indicators | 4 px | up to 2 | The selected item is the large filled circle. The adjacent items are its immediate neighbors. The overflow indicators are the smallest points: they appear on either side, for the items the Pager does not show. All items are separated by the same fixed spacing of 4 px. ![The selected item, the adjacent items and the overflow indicators, with their diameters and spacing](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Pager-Anatomy-Structure.67b704ef6337.png) *The selected item, the adjacent items and the overflow indicators, with their diameters and spacing* ## Properties ### Color A single color drives the whole Pager, and it is white by default, because the Pager is usually read over an image. The selected item is always fully opaque, and every other dot takes the same [color](/uxdesign/atom-color/) at 60% opacity. The difference in opacity is what separates the item on screen from the rest, along with the difference in size. ![The selected item at full opacity, the others at 60%](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Pager-Properties-Color.252d8ea7a615.png) *The selected item at full opacity, the others at 60%* ## Layout ### Placement The Pager sits at the bottom of the media, centered: a full-width block whose items are grouped in the middle. The inset between the items and the edge belongs to the host, not to the Pager. ![The Pager at the bottom, centered](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Pager-Layout-Placement.b76ab7be1ad9.png) *The Pager at the bottom, centered* ## Behavior ### Short lists Up to five items, the Pager shows them all: one selected item, and every other one at the adjacent size. With a single item, there is no Pager. ![Two, three, four and five items: all of them are shown](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Pager-Behavior-ShortList.81bed7600986.png) *Two, three, four and five items: all of them are shown* ### Long lists Beyond five items, the Pager switches to a reduced display: the selected item, up to four adjacent items, and an overflow indicator on either side. When both indicators are displayed, the selected item sits at the center of the Pager. ![A long list, at the start, in the middle and at the end](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Pager-Behavior-LongList.94fb6152f3c7.png) *A long list, at the start, in the middle and at the end* ### Moving from one item to the next Sizes do not jump from one state to the other: they transition smoothly, so that the selected item grows as its neighbor shrinks. The overflow indicators fade in and out. ![The items changing size as the carousel advances](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Pager-Behavior-Animation.0edf9cb46e59.gif) *The items changing size as the carousel advances*