Image List Item

The Alexa image list item responsive component (AlexaImageListItem) displays an image along with text, formatted to display within a list. This component uses the AlexaImage responsive component to size and format the item. Display a list of AlexaImageListItem items with the AlexaImageList responsive template.

Import the alexa-layouts package

To use AlexaImageListItem, import the alexa-layouts package.

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

AlexaImageListItem parameters

All parameters except type are optional.

Name Type Default Description Version added/updated

defaultImageSource

String

URI a default image to use when imageSource isn't provided. Provide a defaultImageSource to make sure that image containers are never empty.

1.1.0

emptyRatingGraphic

any

empty

The graphic to display to represent an 'empty' rating slot (such as an empty star). Used when ratingSlotMode is multiple. You can provide either a reference to an AVG or the URL of an image.

On smaller viewports, the rating doesn't display due to space.

For details about how to use the AlexaRating properties, see AlexaRating.

1.2.0

entities

Array

[]

Array of entity data to bind to this component.

1.2.0

fullRatingGraphic

any

full

The graphic to display to represent a 'full' rating slot (such as a full star). Used when ratingSlotMode is multiple. You can provide either a reference to an AVG or the URL of an image.

On smaller viewports, the rating doesn't display due to space.

For details about how to use the AlexaRating properties, see AlexaRating.

1.2.0

halfRatingGraphic

any

half

The graphic to display to represent a 'half' rating slot (such as a half star). Used when ratingSlotMode is multiple. You can provide either a reference to an AVG or the URL of an image.

On smaller viewports, the rating doesn't display due to space.

For details about how to use the AlexaRating properties, see AlexaRating.

1.2.0

hasPlayIcon

Boolean

false

When true, display a "play" icon in front of the secondaryText.

1.2.0

hideOrdinal

Boolean

false

When true, don't display a number next to the list item.

1.1.0

imageAlignment

String

center

Determines how to position the image within the bounding box. Used when the image is smaller than the bounding box. Options are bottom, bottom-left, bottom-right, center, left, right, top, top-left, top-right. This property works the same as the imageAlignment property for the AlexaImage responsive component.

1.1.0

imageAspectRatio

String

square

Aspect ratio to use for the image bounding box for the item. Options are square, round, standard_landscape, standard_portrait, poster_landscape, poster_portrait, widescreen. This property works the same as the imageAspectRatio property for the AlexaImage responsive component except that the height and width of the bounding box are pre-defined based on the aspect ratio and can't be changed.

1.1.0

imageBlurredBackground

Boolean

false

When true, display a blurred version of the image behind the image. Ignored when imageScale is set to fill or best-fill. This property works the same as the imageBlurredBackground property for the AlexaImage responsive component.

1.1.0

imageHideScrim

Boolean

false

When true, hide the overlay (scrim) between image and text content.

1.1.0

imageMetadataPrimacy

Boolean

false

When true, prioritize secondaryText and tertiaryText over hintText on devices that can display one element due to screen size. When false, secondaryText and tertiaryText are hidden on small screens.

1.1.0

imageProgressBarPercentage

Number

0

When set to a number from 1 to 100, display a progress bar on the image based on the provided percentage. This gives the user a glanceable status for the item. Set to 0 to hide the progress bar.

1.1.0

imageRoundedCorner

Boolean

true

When true, use rounded corners for the image.

1.1.0

imageScale

String

best-fit

Determines how to scale the image to fit within the bounding box. Options are none, fill, best-fit, best-fill, best-fit-down. This property works the same as the imageScale property for the AlexaImage responsive component.

1.1.0

imageSource

String

URI for the image to display.

1.1.0

primaryAction

Command

The action to trigger when the user selects the list item.

1.1.0

primaryText

String

Primary text to display for the list item.

1.1.0

providerText

String

Provider text to display over the image.

1.1.0

ratingGraphicType

String

AVG

The type of graphic to use for the rating. Set to AVG or image.

On smaller viewports, the rating doesn't display due to space.

For details about how to use the AlexaRating properties, see AlexaRating.

1.2.0

ratingNumber

Number

None

The numeric rating between 0 and 5. Used when ratingSlotMode is multiple.

On smaller viewports, the rating doesn't display due to space.

For details about how to use the AlexaRating properties, see AlexaRating.

1.2.0

ratingSlotMode

String

None

Determines whether to display a single graphical asset for the rating, or build the rating from multiple image assets. When set to single, provide a single graphical asset in the singleRatingGraphic property. When multiple, provide the numeric rating in ratingNumber.

On smaller viewports, the rating doesn't display due to space.

For details about how to use the AlexaRating properties, see AlexaRating.

1.2.0

ratingText

String

None

Text to display next to the rating.

On smaller viewports, the rating doesn't display due to space.

For details about how to use the AlexaRating properties, see AlexaRating.

1.2.0

secondaryText

String

Secondary text for the list item.

1.1.0

singleRatingGraphic

any

None

The graphic to display to represent the rating. Used when ratingSlotMode is single. You can provide either a reference to an AVG or the URL of an image.

On smaller viewports, the rating doesn't display due to space.

For details about how to use the AlexaRating properties, see AlexaRating.

1.2.0

singleRatingGraphicWidth

Dimension

None

The width of the bounding box for the single graphic that represents the rating. Used when ratingSlotMode is single.

On smaller viewports, the rating doesn't display due to space.

For details about how to use the AlexaRating properties, see AlexaRating.

1.2.0

tertiaryText

String

Tertiary text for the list item.

1.1.0

theme

String

dark

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

1.1.0

Image size, aspect ratio, and scaling

The AlexaImageListItem responsive component uses a pre-defined height and width, determined by the `imageAspectRatio you provide and the characteristics of the viewport.

The aspect ratio, scaling, and alignment work the same way they do for the AlexaImage responsive component. For details, see Image aspect ratios and scaling examples.

AlexaImageListItem example

The following example illustrates an AlexaImageListItem with all text options, the progress bar, and rating.

AlexaImageListItem
AlexaImageListItem