Header (1.0.0)

(This is not the most recent version of AlexaHeader. Use the Other Versions option to see the documentation for the most recent version of AlexaHeader)

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

AlexaHeader automatically displays properly on devices of different sizes and shapes. Use this layout to help build a responsive APL document.

Import the alexa-layouts package

To use AlexaHeader, import the alexa-layouts package.

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

AlexaHeader parameters

All parameters except type are optional.

Name Type Default Description Version added/updated

headerAttributionImage

String

—

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

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

—

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

headerBackgroundColor

String

transparent

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

1.0.0

headerNavigationAction

String

—

Argument to pass via the SendEvent command when the button is pressed/clicked.

1.0.0

headerSubtitle

String

—

Secondary text to render in header.

1.0.0

headerTitle

String

—

Primary text to render in the header.

1.0.0

type

String

—

Always set to AlexaHeader

1.0.0

AlexaHeader example

"mainTemplate": {
      "item": {
            "type": "AlexaHeader",
            "headerTitle": "Header Title",
            "headerSubtitle": "Header Subtitle",
            "headerAttributionImage": "http://Header Attribution Image",
            "headerBackgroundColor": "red",
            "headerBackButton": true,
            "headerNavigationAction": "Go Back"
      }
}

Related topics

Was this page helpful?

Last updated: Nov 28, 2023