Responsive Templates
A responsive template is a complete viewport design that combines components and responsive components. The template fills the entire viewport and includes the background, header, and content.
Available responsive templates
The following table lists available responsive templates in the alexa-layouts package and indicates which viewport profiles in the alexa-viewport-profiles package support the component.
| Name | Description | Standard viewports | Widget viewports |
|---|---|---|---|
|
Displays text and an image to present information about an entity such as a person, place, or thing. |
Yes |
No | |
|
Displays a list of images and text in a grid. |
Yes |
No | |
|
Displays short, informational text string on the screen. |
Yes |
No | |
|
Displays an image with a header and caption. You can specify the caption text as primary and secondary text, and you can specify the placement of the caption in relation to the image. |
No |
Medium | |
|
Displays a scrolling list of images and text. |
Yes |
No | |
|
Displays a list of items. You specify whether the template presents text-based list items or image-based items. |
Yes |
No | |
|
Displays a list of items in a series of pages. |
Yes |
No | |
|
Displays an image with a header and caption. You can specify the caption text as primary and secondary text. |
No |
Medium | |
|
Displays a scrolling list of text items. |
Yes |
Medium | |
|
Displays multiple lines of text with a header, background, and footer action button on a widget. You can display primary, secondary, and tertiary text. |
No |
Medium |
Viewport profiles and responsive templates
Viewport profiles are available in the alexa-viewport-profiles package.
Standard viewport profiles include the following:
- All hub round profiles
- All hub landscape profiles
- All hub portrait profiles
- All mobile profiles
- All TV profiles
Widget viewport profiles include the following:
- Widget Medium (
@hubWidgetMedium)
For details about the viewport profiles, see Viewport Profiles.
Design guidance
For design guidance on how to use the responsive templates in standard APL documents, see Alexa Design Guide: Responsive Templates.
For design guidance on how to use the responsive templates in widgets, see Alexa Design Guide: Widget Responsive Templates.
Related topics
Last updated: Mar 02, 2023