Spotlight (Image/Video)
This is just one of many CMS components that are used to display content on the Athleta website. It has a heading, subheading, description sections, with a CTA link or button. Each of these fields can be optionally configured to display content, or, an image or can be displayed on its own that can link back to specific content.
{
"_meta": {
"name": "2024_SPR1_F1_HP_ATG_Spotlight",
"schema": "https://**.**.**/schema/content/v1/spotlight.json",
"deliveryId": "8eac1720-074f-491d-b9a0-092270950f59"
},
"general": {
"layout": "fullBleed",
"background": {
"type": "image",
"images": [
{
"variations": [
{
"variation": "desktop"
},
{
"variation": "mobile"
}
],
"fliph": false,
"flipv": false,
"enableChroma": false,
"chromaQuality": 80
}
]
},
"showHideBasedOnScreenSize": "alwaysShow"
},
"content": {
"contentJustification": "left",
"verticalAlignment": "middle",
"icon": {
"iconSize": "24px"
},
"mobileContentJustification": "center",
"mobileVerticalAlignment": "bottom",
"mobileIcon": {
"iconSize": "14px"
},
"spotlightText": {
"useGradientBackfill": false,
"mobileOverride": "<p class=\"amp-cms--p\" style=\"text-align:left;\"><span class=\"amp-cms--headline-2\" style=\"color:#FFFFFF;font-weight:400\">CAMP COMPANIONS</span></p><hr style=\"display:block;border:0;height:8px;margin:0;background:transparent;\" aria-hidden=\"true\" /><hr style=\"display:block;border:0;height:8px;margin:0;background:transparent;\" aria-hidden=\"true\" /><p class=\"amp-cms--p\" style=\"text-align:left;\"><span class=\"amp-cms--body-2\" style=\"color:#FFFFFF;font-weight:400\">Secure pockets, stay-put details, and light</span></p><p class=\"amp-cms--p\" style=\"text-align:left;\"><span class=\"amp-cms--body-2\" style=\"color:#FFFFFF;font-weight:400\">layers for every adventure under the sun.</span></p><hr style=\"display:block;border:0;height:8px;margin:0;background:transparent;\" aria-hidden=\"true\" /><hr style=\"display:block;border:0;height:8px;margin:0;background:transparent;\" aria-hidden=\"true\" /><p class=\"amp-cms--p\" style=\"text-align:left;\"><a href=\"/browse/category.do?cid=1054844&mlink=1,1,HP_AG_Spotlight_CTA1\" class=\"amp-cms--body-2\" style=\"color:#FFFFFF;font-weight:400\">Shop Girls' New Arrivals</a></p>",
"defaultText": "<p class=\"amp-cms--p\" style=\"text-align:left;\"><span class=\"amp-cms--headline-1\" style=\"color:#FFFFFF;font-weight:400\">CAMP </span></p><p class=\"amp-cms--p\" style=\"text-align:left;\"><span class=\"amp-cms--headline-1\" style=\"color:#FFFFFF;font-weight:400\">COMPANIONS</span></p><hr style=\"display:block;border:0;height:8px;margin:0;background:transparent;\" aria-hidden=\"true\" /><hr style=\"display:block;border:0;height:8px;margin:0;background:transparent;\" aria-hidden=\"true\" /><p class=\"amp-cms--p\" style=\"text-align:left;\"><span class=\"amp-cms--body-1\" style=\"color:#FFFFFF;font-weight:400\">Secure pockets, stay-put details, and light </span></p><p class=\"amp-cms--p\" style=\"text-align:left;\"><span class=\"amp-cms--body-1\" style=\"color:#FFFFFF;font-weight:400\">layers for every adventure under the sun.</span></p><hr style=\"display:block;border:0;height:8px;margin:0;background:transparent;\" aria-hidden=\"true\" /><hr style=\"display:block;border:0;height:8px;margin:0;background:transparent;\" aria-hidden=\"true\" /><p class=\"amp-cms--p\" style=\"text-align:left;\"><a href=\"/browse/category.do?cid=1054844&mlink=1,1,HP_AG_Spotlight_CTA1\" class=\"amp-cms--body-1\" style=\"color:#FFFFFF;font-weight:400\">Shop Girls' New Arrivals</a></p>"
}
},
"image": {
"mainImage": [
{
"image": {
"_meta": {
"schema": "http://**.**/cms/schema/v1/core#/definitions/image-link"
},
"id": "812405e0-cebc-4de8-a591-cb9c753d7b1b",
"name": "Summer_24_Drop2_F1_HP_Girl_Spotlight_XL",
"endpoint": "athletaprod",
"defaultHost": "cdn.media.amplience.net"
},
"altText": "",
"variations": [
{
"variation": "desktop"
},
{
"variation": "mobile"
}
],
"fliph": false,
"flipv": false,
"enableChroma": false,
"chromaQuality": 80
}
],
"mobileImageOverride": [
{
"image": {
"_meta": {
"schema": "http://**.**/cms/schema/v1/core#/definitions/image-link"
},
"id": "4ea026e2-a241-4c78-b668-9ca9924fbebd",
"name": "Summer_24_Drop2_F1_HP_Girl_Spotlight_S",
"endpoint": "athletaprod",
"defaultHost": "cdn.**.**.net"
},
"altText": "",
"variations": [
{
"variation": "desktop"
},
{
"variation": "mobile"
}
],
"fliph": false,
"flipv": false,
"enableChroma": false,
"chromaQuality": 80
}
],
"link": {
"value": "/browse/category.do?cid=1054844&mlink=1,1,HP_AG_Spotlight_CTA1",
"label": "Shop Girls' New Arrivals"
}
},
"imageOverlays": {
"handle": {
"placement": "left"
},
"useGradientBackfill": false
}
}Wireframes
The wireframes have been recreated from memory using Figma to illustrate how the component could be configured and displayed on the page.
Component
The component is built using React, receiving a JSON payload from a CMS provider. The JSON is processed then rendered on the page. The wireframes show optionally displaying image, headline, subheading, and CTA link or button. The component can optionally display a video instead of an image.
Image
The image is responsive and will scale to the size of the container it is in. The headline and subheading are optional. The layout can be configured to display on the left, center, or right side of the image. It can also be vertically aligned at the top, center, or bottom of the container.
Video
The component can optionally display a video instead of an image. The video will automatically play when the component is displayed on the page. The video can be configured to loop, or, play once then stop.
Sub-components
There are several sub-components that make up the entire component, including an image or video, Heading, Subheading, description, and CTA link. It can be configured to also display a "details" link, that is displayed in the lower right corner of the component.