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

Detail

Displays text and an image to present information about an entity such as a person, place, or thing.

Yes

No

Grid List

Displays a list of images and text in a grid.

Yes

No

Headline

Displays short, informational text string on the screen.

Yes

No

Image Caption

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

Image List

Displays a scrolling list of images and text.

Yes

No

Lists

Displays a list of items. You specify whether the template presents text-based list items or image-based items.

Yes

No

Paginated List

Displays a list of items in a series of pages.

Yes

No

Photo

Displays an image with a header and caption. You can specify the caption text as primary and secondary text.

No

Medium

Text List

Displays a scrolling list of text items.

Yes

Medium

Text Wrapping

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.

Last updated: Mar 02, 2023