Spotlight Card Old Examples

This component is deprecated, please use the new spotlight component

We got an property imagePosition and it accepts x-top, x-bottom, x-center, y-top, y-bottom and y-center. Here x and y are used to position the image along x-axis and y-axis. and the default is center center. And there is another property fullHeight it accepts two values true and false the default is set to false if we set to true the background-size will set to cover else to contain. By deafult image width is set to 35% if you want to display the image width as 100% pass imageClasses="u-w-100"

imagePosition default set to center center and to display background-size as cover set fullHeight=true.

Default image position center

imageClass="u-w-100", imagePosition="x-bottom"

imageClass="u-w-100", imagePosition="y-bottom"

imagePosition="y-bottom" with tags

Absorve the below player image on mobile screen to find different variations of image.

imagePosition="x-bottom"

imagePosition="x-center"

imagePosition="x-top"

You can set the background color and font-colorstyle="--lta-theme--on-1: #333a42" or you can pass it as property bgColor="u-lta-theme--1-background-green"

imagePosition="x-bottom" and imageClasses="u-w-100"