Headline
The Alexa headline template (AlexaHeadline) displays short, informational text string on the screen. This is a full-screen template that can include a header, footer, and background.
Compatibility
AlexaHeadline is designed to work with all standard viewport profiles in the alexa-viewport-profiles package:
- All hub round profiles
- All hub landscape profiles
- All hub portrait profiles
- All mobile profiles
- All TV profiles
If you use AlexaHeadline on an unsupported viewport, you might have unexpected results. For details about viewport profiles, see Viewport Profiles.
Import the alexa-layouts package
To use AlexaHeadline, import the alexa-layouts package.
The latest version of the alexa-layouts package is 1.7.0. AlexaHeadline was introduced in version 1.1.0.
AlexaHeadline parameters
All parameters except type are optional.
| Name | Type | Default | Description | Widget support | Version added | 
|---|---|---|---|---|---|
| 
 | String | 
 | Image/video alignment to apply to background image/video. Defaults to center. | Not supported | 1.1.0 | 
| 
 | Boolean | 
 | When  | Not supported | 1.1.0 | 
| 
 | — | Color to use as a background color. Used when neither  | Not supported | 1.1.0 | |
| 
 | Boolean | 
 | When  | Not supported | 1.1.0 | 
| 
 | String | — | URL for the background image source. Used when  | Not supported | 1.1.0 | 
| 
 | Boolean | 
 | When  | Not supported | 1.1.0 | 
| 
 | String | 
 | Image or video scaling to apply to background image or video. Defaults to  | Not supported | 1.1.0 | 
| 
 | String | 
 | Audio track to play on when playing the video. Can be  | Not supported | 1.1.0 | 
| 
 | Boolean | 
 | When  | Not supported | 1.1.0 | 
| 
 | — | The background video source. Provide a source in the same format shown for the  | Not supported | 1.1.0 | |
| 
 | Array | — | Array of entity data to bind to this template. | Not supported | 1.2.0 | 
| 
 | String | — | Hint text to display in the footer. Use  | Not supported | 1.1.0 | 
| 
 | String | — | URL for attribution image source. Displays when  | Not supported | 1.1.0 | 
| 
 | Number | 
 | The opacity of the attribution text and attribution image. | Not supported | 1.3.0 | 
| 
 | Boolean | 
 | When  | Not supported | 1.1.0 | 
| 
 | String | — | Attribution text to render in the header. Shown when  | Not supported | 1.1.0 | 
| 
 | Boolean | 
 | When  | Not supported | 1.1.0 | 
| 
 | String | 
 | An accessibility label to describe the back button to customers who use a screen reader. | Not supported | 1.1.0 | 
| 
 | 
 | Command to run when the user selects the back button. Defaults to  | Not supported | 1.1.0 | |
| 
 | String | 
 | Optional color value to use as the background color for the Header. Defaults to  | Not supported | 1.1.0 | 
| 
 | Boolean | 
 | Toggle to display the divider that appears at the bottom of header to help separate it from the content below. Default to  | Not supported | 1.1.0 | 
| 
 | String | — | Secondary text to render in header. | Not supported | 1.1.0 | 
| 
 | String | — | Primary text to render in header. | Not supported | 1.1.0 | 
| 
 | String | 
 | The language for the text displayed in the template. This language determines the default font used for the text. For example, when set to  | Not supported | 1.4.0 | 
| 
 | String | 
 | Specifies the layout direction for the content. Set this property to either  | Not supported | 1.4.0 | 
| 
 | String | — | Primary text to display. Text is truncated based on the size of the viewport. For example, on a large hub, up to four lines of text display, but on a smaller hub, two lines display. | Not supported | 1.3.0 | 
| 
 | String | — | Secondary text to display in a single line. Displayed below the primary text. Text is truncated to display on a single line. | Not supported | 1.1.0 | 
| 
 | String | 
 | Set the dark or light color theme. The selected theme controls the colors used for the template. | Not supported | 1.1.0 | 
| 
 | String | — | Always set to  | Not supported | 1.1.0 | 
AlexaHeadline example
Related topics
- Alexa Design System Overview
- Responsive Components and Templates
- Alexa Design Guide: Responsive Templates
Last updated: Nov 28, 2023