Pagers

The page indicator represents the currently active page and total pages of an overlay that lets you navigate horizontally between content.

Design elements should be anchored to the bottom of the
frame.

Stack are a container component, so they share design principles with cards and lists:

Clear Feedback: Pagers communicate where the user is within a carousel of content.

Contextual: The primary purpose of a pager is to provide clear and immediate context for the content it's associated with.

Concise: Pagers are small and precise in visual language.

Usage & Placement

Pagers show the user their current position within a linear sequence of content.

A user can quickly swipe through pagers.

Design elements should be anchored to the bottom of the
frame. They are placed above the system bar area and under the content area.

Cards are arranged in a row with no overlap

Allow cards to overlap. Only one card is visible at a time.

A pager is composed of a row of indication dots in active and inactive states.

pager is composed of a row of indication dots in active and inactive
states. A. Active (Current page)

B. Inactive page

Pager indicating swiping in the wrong direction.

pager is composed of a row of indication dots in active and inactive
states.

When five or more dots are present, the additional dots are indicated with a smaller first dot and slide the entire row until the end is reached.

Pagers have built-in scrim, paging, and animations that can't be customized. Rather the content within the stacks pager is customized.