Lists

There are four types of lists.

  • Test list
  • Image list
  • Grid list
  • Paginated list

Text list

Text lists display items in a scrolling layout. Use text lists to present information that’s primarily text-based, such as names and titles, contacts, and to-do lists.

Text lists contain the following elements, which are numbered to correspond to the screenshot:

  1. Header
  2. Text
  3. Ordinal
  4. Divider

Selecting an item

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.

Scrolling

Text lists scroll vertically on most viewport profiles, except for TV overlay. When the user scrolls content, the list items scroll behind the header.

Swipe to action state

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.

Image list

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:

  1. Header
  2. Image list item, which contains an image; ordinal; and primary, secondary, and tertiary text
  3. Footer

Selecting an item

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.

Scrolling

Image lists scroll horizontally.

Image aspect ratios

There are seven image aspect ratios available for image lists.

Note: these aspect ratios are also available for Grid lists as well.

Grid list

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:

  1. Header
  2. Image list item, which contains an image; ordinal; and primary, secondary, and tertiary text

Selecting an item

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.

Scrolling

Grid lists scroll vertically. The header is fixed during scrolling.

Do

horizontal divider line

Use grid lists to display content when there are more than four items.

Don't

horizontal divider line

Avoid using grid list for four or fewer items. Instead, use the image list template.

Paginated list

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:

  1. Header
  2. Background
  3. Primary and secondary text
  4. Page counter

Do

horizontal divider line

Use a scrim or background overlay to make sure text is readable.

Don't

horizontal divider line

Omit the scrim or background overlay as text will not be readable.

Try it out

See Create and Edit an APL Document.

Related developer documentation