Header

The Alexa header responsive component (AlexaHeader) displays common header information such as a title, subtitle, and back button.

Import the alexa-layouts package

To use AlexaHeader, import the alexa-layouts package.

The latest version of the alexa-layouts package is 1.5.0. AlexaHeader was introduced in version 1.0.0.

AlexaHeader parameters

All parameters except type are optional.

Name Type Default Description Version added/updated

entities

Array

[]

Array of entity data to bind to this component.

1.2.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.0.0

headerAttributionOpacity

Number

0.8

The opacity of the attribution text and attribution image. Set to a number between 0 and 1.

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.

1.0.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.0.0

headerBackButton

Boolean

false

When true, display a back button in the header.

1.0.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 run when the user selects the back button.

1.1.0

headerBackgroundColor

String

transparent

Optional color value to use as the background color for the header.

1.0.0

headerDivider

Boolean

false

When true, display a divider below the header to help separate it from content.

1.1.0

headerSubtitle

String

None

Secondary text to render in header.

1.0.0

headerTitle

String

None

Primary text to render in header.

1.0.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 about support for right-to-left languages in the responsive components, see Support for Right-to-left Languages.

1.4.0

theme

String

dark

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

1.1.0

type

String

None

Always set to AlexaHeader

1.0.0

AlexaHeader example

{
  "type": "AlexaHeader",
  "headerBackgroundColor": "red",
  "headerTitle": "This is the header title",
  "headerSubtitle": "This is the header subtitle",
  "headerAttributionText": "Attribution text"
}

Example of AlexaHeader with a red background
Example of AlexaHeader with a red background