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.

Import the alexa-layouts package

To use AlexaHeadline, import the alexa-layouts package.

The latest version of the alexa-layouts package is 1.2.0. AlexaHeadline was introduced in version 1.1.0.

AlexaHeadline parameters

All parameters except type are optional.

Name Type Default Description Version added/updated

backgroundAlign

String

center

Image/video alignment to apply to background image/video. Defaults to center.

1.1.0

backgroundBlur

Boolean

false

When true, display the provided background image with a blur effect. Applies when backgroundImageSource contains a value. Defaults to false.

1.1.0

backgroundColor

Color

None

Color to use as a background color. Used when neither backgroundImageSource or backgroundVideoSource contain values.

1.1.0

backgroundColorOverlay

Boolean

false

When true, apply a scrim to the background to make it easier to read the text displayed over the image or video.

1.1.0

backgroundImageSource

String

None

URL for the background image source. Used when backgroundVideoSource isn't provided.

1.1.0

backgroundOverlayGradient

Boolean

false

When true, apply a gradient to the background.

1.1.0

backgroundScale

String

best-fill

Image or video scaling to apply to background image or video. Defaults to best-fill.

1.1.0

backgroundVideoAudioTrack

String

foreground

Audio track to play on when playing the video. Can be foreground | background | none Defaults to foreground.

1.1.0

backgroundVideoAutoPlay

Boolean

false

When true, the video begins playing automatically when the document renders on the device. Applies when backgroundVideoSource contains a value. Defaults to false.

1.1.0

backgroundVideoSource

Video source

None

The background video source. Provide a source in the same format shown for the source property of the Video component

1.1.0

entities

Array

[]

Array of entity data to bind to this template.

1.2.0

footerHintText

String

None

Hint text to display in the footer. Use textToHint to add the correct wake word to the hint.

1.1.0

headerAttributionImage

String

None

URL for attribution image source. Displays when headerAttributionPrimacy is true, or on a device that shows Title/Subtitle and Attribution.

1.1.0

headerAttributionPrimacy

Boolean

true

When true, display the headerAttributionImage on devices that display a single element due to screen size. When false, display the headerTitle and headerSubtitle. Defaults to true.

1.1.0

headerAttributionText

String

None

Attribution text to render in the header. Shown when headerAttributionImage doesn't have a value and headerAttributionPrimacy is true, or on a device that shows both Title/Subtitle and Attribution.

1.1.0

headerBackButton

Boolean

false

When true, display a back button in the header.

1.1.0

headerBackButtonAccessibilityLabel

String

None

An accessibility label to describe the back button to customers who use a screen reader.

1.1.0

headerBackButtonCommand

Command

{"type":"SendEvent","arguments":["goBack"]}

Command to execute when the user selects the back button. Defaults to SendEvent with a 'GoBack' argument.

1.1.0

headerBackgroundColor

String

transparent

Optional color value to use as the background color for the Header. Defaults to transparent.

1.1.0

headerDivider

Boolean

false

Toggle to display the divider that appears at the bottom of header to help separate it from the content below. Default to false

1.1.0

headerSubtitle

String

None

Secondary text to render in header.

1.1.0

headerTitle

String

None

Primary text to render in header.

1.1.0

primaryText

String

Primary text to display in up to two lines. Text is truncated to fit to two lines.

1.1.0

secondaryText

String

Secondary text to display in a single line. Displayed below the primary text. Text is truncated to display on a single line.

1.1.0

theme

String

dark

Set the dark or light color theme. The selected theme controls the colors used for the template.

1.1.0

type

String

None

Always set to AlexaHeadline

1.1.0

AlexaHeadline example

AlexaHeadline example
AlexaHeadline example