In this article:
You use the detail template to display more information and actions about a single item, such as a person, place, product, thing, or event. The overall layout contains an image on one side and text content on the other. This format shows more information on-screen with a short voice synopsis.
How to use detail templates
Detail templates contain the following elements, which are numbered to correspond to the screenshot that follows:
1. Header
Includes a title, navigation, and attribution.
2. Primary text
Top-level information, such as the name of a movie, recipe, contact, or location.
3. Secondary text
Additional details about the item.
4. Buttons
Actions the user can take.
5. Image
Photos or artwork of contacts, restaurants, recipes, or movies.
6. Image text
Captioned information about the image.
The following screenshot shows the location of the six elements in the template:
Types of detail templates
You can turn autoplay on or off and you can set how many times the video loops. Videos should be secondary to the experience—not eye-catching or dynamic. In this example, Alexa's speech is primary and the video is secondary.
You have four detail templates to choose from:
- Generic
- Movies and TV
- Location
- Recipe
Generic
You can use the generic detail template for a wide range of items. You can provide optional body text for greater detail, if needed.
Movie and TV
The movies and TV detail template provides more information about movies, TV series, releases, and show times. You can use metadata to display content ratings and other details, such as plot, director, and actors. You have the option to add body text to provide a longer summary.
Buttons can trigger an action to play a video, add to watch list, or display movie show times.
Location
Use the location detail template to provide information about a place, such as a business or restaurant. The template includes the address and ratings components.
Buttons can trigger an action to make a phone call or get directions.
Recipe
The recipe detail template provides recipe information, including a list of ingredients and ratings. The template also includes a jumping off point for step-by-step directions in a list format with ordinal numbers.
Buttons can trigger an action to add ingredients to a shopping list or save a recipe.
Best Practices
- The response has rich, detailed information and actions related to a single item.
- The user has focused on a single item from a list.
- The user’s request resulted in a list that has only one match.
- There are multiple actions available related to an item, such as add to cart, favorite, see show times, etc.
- Where possible, include a relevant image as the primary metadata. You can place images on the left or right side. When you can't find a relevant image, display a default no_image icon.
Do: Provide imagery for background and image components when possible.
Don't: When no imagery is provided, a default background and empty state will be displayed.
The headline displays short phrases of text that that you want prominently centered on the screen. It's a full-screen responsive template works across device modes. The headline template works with header, footer, and background responsive components.
How to use the headline template
You can have primary and secondary content in a headline. Primary content consists of up to two lines of text across the screen. The content should emphasize the main action or focus of the skill content at that particular moment for the user.
Secondary content is limited to one line. You present secondary content after primary content. The template truncates any secondary text for smaller device modes.
For example, a headline is great for a welcome message. “Welcome to Cupcake Shop! Let’s get you a cupcake, pronto.” Your hint text could tell the customer how to order a cupcake: “Just say ‘chocolate cupcake’ or another kind of cupcake to get started.”
Best Practices
- Keep your headlines to primary text only, if possible. Your headlines should be concise enough to describe the main action or content of the skill at that moment, without being overly verbose and difficult to read.
- Use secondary text only if the action or content is complex and you need a supporting statement. Keep in mind that usually the template truncates secondary text. Don't present vital information as secondary text.
Try it out
Related developer documentation
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.
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:
- Header
- Image list item, which contains an image; ordinal; and primary, secondary, and tertiary text
- 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:
- Header
- 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: Use grid lists to display content when there are more than four items.
Don't: 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:
- Header
- Background
- Primary and secondary text
- Page counter
Do: Use a scrim or background overlay to make sure text is readable.
Don't: Omit the scrim or background overlay as text will not be readable.
Try it out
Related developer documentation
An ordinal displays the number of an item within a list.
How to use ordinals
Use ordinals to indicate the number of an item in a list, such as a shopping list, series of steps, or instructions. Ordinals also give users the ability to select an item by saying the ordinal number, rather than the item name.
Components of an ordinal
A: Contanier
B: Ordinal
Behavior
Ordinals change from normal to pressed when selected by voice or touch, and from normal to focused when highlighted by a keyboard or remote, or when Alexa is speaking.
Best Practices
- Don’t use ordinals if voice navigation isn’t supported, such as in settings.
- Use ordinals only in defined, limited lists. Don’t use ordinals if the list can advance or reverse forever, such as in calendars.