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

backgroundAlign

String

center

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

Not supported

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.

Not supported

1.1.0

backgroundColor

Color

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

Not supported

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.

Not supported

1.1.0

backgroundImageSource

String

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

Not supported

1.1.0

backgroundOverlayGradient

Boolean

false

When true, apply a gradient to the background.

Not supported

1.1.0

backgroundScale

String

best-fill

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

Not supported

1.1.0

backgroundVideoAudioTrack

String

foreground

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

Not supported

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.

Not supported

1.1.0

backgroundVideoSource

Video source

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

Not supported

1.1.0

entities

Array

Array of entity data to bind to this template.

Not supported

1.2.0

footerHintText

String

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

Not supported

1.1.0

headerAttributionImage

String

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

Not supported

1.1.0

headerAttributionOpacity

Number

1 for small, round hubs. @opacitySecondary for all others.

The opacity of the attribution text and attribution image.

Not supported

1.3.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.

Not supported

1.1.0

headerAttributionText

String

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.

Not supported

1.1.0

headerBackButton

Boolean

false

When true, display a back button in the header.

Not supported

1.1.0

headerBackButtonAccessibilityLabel

String

Back

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

Not supported

1.1.0

headerBackButtonCommand

Command

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

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

Not supported

1.1.0

headerBackgroundColor

String

transparent

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

Not supported

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.

Not supported

1.1.0

headerSubtitle

String

Secondary text to render in header.

Not supported

1.1.0

headerTitle

String

Primary text to render in header.

Not supported

1.1.0

lang

String

${environment.lang}

The language for the text displayed in the template. This language determines the default font used for the text. For example, when set to ar-SA, the component uses Arabic fonts when available on the device. Set to a BCP-47 string.

For more details about language-specific fonts for responsive components, see Language-specific fonts in the components and templates.

Not supported

1.4.0

layoutDirection

String

${environment.layoutDirection}

Specifies the layout direction for the content. Set this property to either LTR (left-to-right) or RTL (right-to-left). This property doesn't inherit the layoutDirection from the component's parent container. Therefore, explicitly set this property when needed.

For more details about support for right-to-left languages in the responsive components, see Support for Right-to-left Languages.

Not supported

1.4.0

primaryText

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

secondaryText

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

theme

String

dark

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

Not supported

1.1.0

type

String

Always set to AlexaHeadline.

Not supported

1.1.0

AlexaHeadline example



Was this page helpful?

Last updated: Nov 28, 2023