Introduction

The Branding Display Spotlight Solo is a responsive horizontal display banner consisting of a still image and a redirect link.

68641a940611c0f465f0327e2a8ea3feaa03d313ed959a6fecf49920a3b8c9ae BD_Spotlight_Solo_ _Fields

Rendering Examples

CodePen

Desktop

Mobile

Specifications

General

The format can be displayed in any page but only for out-of-grid locations.
The branding zone redirects to 1 URL.

The branding zone refers to the container that holds the background image asset.

Asset Sizes and Behavior

Desktop and Tablet Specifications

Dimensions The background image asset is 1400x450 pixels. Device Support This asset will render at its original size and can cover both desktop and tablet placements as small as 576 px wide or based on the detected device. Alignment and Cropping There is a minimum cropping area of the image asset called the Safety zone, therefore the background image needs to be centered within the branding zone and cropped on all sides. The height of the branding zone can be determined by the retailer as long as the Safety zone is respected.

97c4add02a9288ebdfb1c3edc274f9175ded4ca1fe94d3efc6ef2d0b56bd55d6 BD_Spotlight_Solo_ _Web

Example of the Branding Display Spotlight Solo format and safety zone on original asset size (desktop)

Flexible Scaling Rules The asset can be scaled down to accommodate placements sizes that are thinner(height as small as 133 pixels) only if the width is less than 933 pixels. In this specific layout scenario,

the image can scale to 66.67% (933x300),
and the Safety zone = 384x133.

Mobile Specifications

This layout is optimized for mobile devices and high density screens. Background Image

The background image size is 1280 by 400 pixels or 1200 x 1000 pixels.
- Please note that only one of these size will be used once chosen.
The image is fully responsive:
- It scales proportionally based on the width of its parent container.
- As the width decreases, the height decreases proportionally.
- The image is never cropped.

Dimensions for the Branding Display Spotlight Solo format (mobile horizontal & vertical)

Available Options

The available options are adding a CTA, a legal text, a “more info” text as well as color modes

Example of the Branding Display Spotlight Solo (desktop) with CTA, legal text and "more info" text

Redirection

When a user clicks on the branding zone (anywhere on banner image) or the CTA button, they will be taken to the redirection link defined within the response. There are two possible redirection options:

Self (open in the same tab)
Blank (open in a new tab)

Call to Action (CTA)

A CTA button can be added as an option. If enabled, it will appear below the branding zone. When the user clicks on button, they will be redirected to the link.

142ec83275ca2adf7217c6cd82fe7f768ff5c4f8ac53d8a86b3d3fdac680bda1 BD_Spotlight_Solo_ _CTA

CTA example for the Branding Display Spotlight Solo format

Legal Text

Legal text can be added as an option. It is always visible (90 characters maximum, including spaces) and placed below the branding zone.

79020c187a98d6659f72194051e17bab7198c4829fb8480d90ee64610488692b BD_Spotlight_Solo_ _Legal

Legal Text example for the Branding Display Spotlight Solo format

More Info

More info text can be added as an option (180 characters maximum, including spaces). If the option is enabled:

While hovering over the branding zone, an (i) icon is displayed in the top-left corner
When hovering the (i) icon, the “More info” text is displayed on top of the branding zone.
On mobile, it is always visible or displayed when the user clicks on see more.

c5b920b6e1867418c426f4c534dcf21639918142721f01a0ab87c8bf4c935c6f BD_Spotlight_Solo_ _more_info

82304c5906acd3eba2283bcc364e973f5a9551a4f28c5f92f28a3c769be67365 251212_ BD_Spotlight_Solo _more_info_hover

Example of CTA, legal text and 'More Info' for the Branding Display Spotlight Solo format (mobile)

Color Mode

The advertiser can choose between two preset color modes to ensure the best contrast between text options and the branding zone. Options appear while hovering over the Branding Zone.

Light mode

Background color: #FFFFFF 80% Icon color: #6A6A6A Legal text color: #000000

Dark mode

Background color: 6A6A6A 80% Icon color: #FFFFFF Legal text color: #FFFFFF

Technical Details

Responsive Layout Rules

The rendering is based on the placement on the page and detected device.

fdc1393278d07d9d06641c7fbe8ac96b3958b31598be1fd333115182344eae38 251212_ CD_Spotlight_Solo _Responsive_layout

Placement width between 576px and 1400 px

Branding Zone width is 100% of the placement.
The height is set during integration and remains fixed between 200px and 450px.
The background image is rendered at 100% the asset size, centered and cropped from all sides

Placement width between under 575px

The layout switches to mobile.
The banner spans 100% of the device width and scales proportionally, maintaining its original aspect ratio.

Dimensions for a placement width below 575 px (Branding Display Spotlight Solo, mobile)

Styling

Element styles, such as fonts and button corner radius, are determined by the retailer and the following details shows our default styles. We strongly advise to adhere to our button sizes to keep designs streamlined and consistent.

Borders

Desktop and Tablet layout: 1px border surrounds the branding zone.
Mobile Layout: 2px border surrounds the full creative.

Background Image

Desktop and Tablet layout:
- The background image is centered and is cropped from all sides
Mobile Layout:
- The background image has a fixed position and is never cropped
- It scales proportionally to fit its container.

CTA Button

Max characters: 25
Size: 150 x 30 pixels
Font: Roboto Regular, 12 pixels
Margin & Alignment
- Desktop and Tablet layout:
  - 8 pixels below branding zone & below button
  - When there is no legal text: Centered below branding zone
  - If legal text enabled: left aligned and 10 pixels to the right of the button
- Mobile Layout: 10 pixels below navigation dots and 10 pixels below button

Legal Text and More Info

Desktop and Tablet layout

Detail	Legal text	More info
Location	below branding zone (right of CTA button if enabled)	contained in interactive overlay
Height	Dynamic, based on text length	Dynamic, based on text length
Padding	8 pixels below branding zone & below text. If CTA button is enabled, 10 pixels to the left.	8 pixels, all around
Font	Roboto Regular, 12 pixels	Roboto Regular, 12 pixels
Max characters	90	180
Background	Displayed over a colored layer (the layer color adapts based on color mode)	Same as legal text

Mobile layout

Legal and More info text will be displayed together
“See less” / “See more” option for expanded or contracted view of text
Padding: 8 pixels, all sides
Font: Roboto Regular, 12 pixels
Max characters: same as Desktop and Tablet layout
Background: Displayed over a colored layer (the layer color adapts based on color mode)

Dimensions and spacing for the Branding Display Spotlight Solo format (mobile)

Response Keys

Name (API key)	Parameters	Description
`background_image`	required:`true` maxBytes:`307200` extensions:`[“jpg”, “png”, “gif”]`width:`1400` height:`450` safeZoneWidth:`576` safeZoneHeight:`200`	Background image of desktop ad
`background_image_alt_text`	required:`true` maxChars:`120`	Text description of the desktop background image for ADA compliance
`mobile_background_image`	required:`true` maxBytes:`307200` extensions:`[“jpg”, “png”, “gif”]` width:`1280` height:`400`	Background image of mobile ad. Alternate size allowed:`1200x1000`
`mobile_background_image_alt_text`	required:`true`maxChars:`120`	Text description of the mobile background image for ADA compliance
`redirect_url`	required:`true`	URL user is redirected to upon clicking on the CTA button
`redirect_target`	required:`true` Options:`_self`,`_blank`	Defines whether redirection opens in the same tab or a new tab
`redirect_url_app`	required:`true`	App URL user is redirected to upon clicking CTA from an app environment
`cta_text`	required:`true`maxChars:`20`	Text label of the CTA button
`cta_text_color`	default:`#FFFFFF`	Text color of the CTA button
`cta_color`	default:`#CCCCCC`	Background color of the CTA button
`legal_text`	maxChars:`90`	(Desktop) Visible next to the CTA (Mobile & app) Always visible
`more_info_text`	maxChars:`180`	(Desktop) Shown on hover via “i” icon- (Mobile & app) Always visible
`color_mode`	default:`lightmode`Options:`light`,`dark`	Determines the contrast mode for optimal legibility depending on image brightness

Response Example

{
  "status": "OK",
  "placements": [{
    "viewHome_API_desktop-branding-display-spotlight-solo": [{
      "format": "BDSS",
      "products": [],
      "rendering": {
        "background_image": "/creativeassets-live/desktop-banner.jpg",
        "background_image_alt_text": "Alt text for desktop background image",
        "mobile_background_image": "/creativeassets-live/mobile-banner.jpg",
        "mobile_background_image_alt_text": "Alt text for mobile background image",
        "redirect_url": "https://www.example.com/product",
        "redirect_url_app": "app://product",
        "redirect_target": "_self",
        "cta_text": "Buy Now",
        "cta_text_color": "#FFFFFF",
        "cta_color": "#CCCCCC",
        "legal_text": "© 2025 Example Co. All rights reserved.",
        "more_info_text": "Click to view terms and conditions.",
        "color_mode": "light"
      },
      "OnLoadBeacon": "//b.us5.us.criteo.com/rm?rm_e=OnLoadBeaconExample&ev=2",
      "OnViewBeacon": "//b.us5.us.criteo.com/rm?rm_e=OnViewBeaconExample&ev=2",
      "OnClickBeacon": "//b.us5.us.criteo.com/rm?rm_e=OnClickBeaconExample&ev=2",
      "OnBundleBasketChangeBeacon": "//b.us5.us.criteo.com/rm?rm_e=OnBundleBasketChangeExample&ev=2"
    }]
  }]
}

​Introduction

​Rendering Examples

​CodePen

​Desktop

​Mobile

​Specifications

​General

​Asset Sizes and Behavior

​Desktop and Tablet Specifications

​Mobile Specifications

​Available Options

​Redirection

​Call to Action (CTA)

​Legal Text

​More Info

​Color Mode

​Light mode

​Dark mode

​Technical Details

​Responsive Layout Rules

​Placement width between 576px and 1400 px

​Placement width between under 575px

​Styling

​Borders

​Background Image

​CTA Button

​Legal Text and More Info

​Response Keys

​Response Example

​What’s next