Tapping or saying a list item should enable an action. For example, selecting a list item can lead to a detail page or open the keyboard.
Text lists scroll vertically on most viewport profiles, except for TV overlay. When the user scrolls content, the list items scroll behind the header.
The swipe to action state enables users to perform an action on a list item by swiping the screen on hub experiences or selecting a button on TV experiences. Use the swipe to state to add a quick action to a list item, such as deleting from a list, completing an item in a checklist, or archiving. You can customize the state for any list item action.
The image list template displays a collection of images in a consistent layout. Use image lists when items are better represented through imagery than text. Image lists enable users to quickly scan and compare items in a collection, such as recipes, photo categories, and movie titles.
Image lists contain the following elements, which are numbered to correspond to the screenshot:
Tapping or saying a list item should enable an action. For example, selecting a list item can lead to a detail page or open the keyboard.
Image lists scroll horizontally.
There are seven image aspect ratios available for image lists.
Note: these aspect ratios are also available for Grid lists as well.
The grid list template displays content in a vertically scrolling grid. Use grid lists to display multiple list items in a denser format. The multiple-column, vertical scrolling grid list presents more content on-screen and enables users to scan multiple items, when compared to the horizontally scrolling image list template.
Note: For the hub round viewport profile, use the paginated list template instead.
Grid lists contain the following elements:
Paginated lists display one image at a time over a series of screens. Paginated lists display items as full-screen images, which the user can swipe through to navigate the list. A page counter shows the current page and total number of pages in a list.
Paginated lists are typically used for the hub round viewport profile.
Paginated lists contain the following elements, which are numbered to correspond to the screenshot: