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.

Tip: See Alexa Header Layout design for design guidance.

Import the alexa-layouts package

To use AlexaHeader, import the alexa-layouts package.

The latest version of the alexa-layouts package is 1.4.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	None	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	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
`headerBackgroundColor`	String	`transparent`	Optional color value to use as the background color for the header.	1.0.0
`headerNavigationAction`	String	None	Argument to pass via the SendEvent command when the button is pressed/clicked.	1.0.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
`type`	String	None	Always set to `AlexaHeader`	1.0.0

Note: If both headerAttributionText and headerAttributionImage parameters are provided, then headerAttributionImage is used.

AlexaHeader example

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