Introduction

Branding Display Grid Solo is an in-grid display banner with a still image and a redirect link. .

a697e85f1d77c9d67253027e1028491f6a42af240df42fa9155154c4d02aa84c BD_Grid_Solo_ _Fields

Rendering Example

CodePen

Desktop

Mobile

Specifications

General

The format must be displayed on the grid page.
The format redirects to 1 URL.

When a website is responsive:

The branding zone size should be equal to the grid tile size.
if in list view or single column grid, format will change to the Alternative Mobile Layout.

Assets Size and Behavior

Background Image Specifications

Dimensions
The background image asset is 1500x1500 pixels. Device Support
This asset can cover both desktop and mobile/APP placements based on the detected device and layout. It will not render at its original size but instead scaled down to accommodate double density screens (or higher) for improved quality. Alignment and Cropping
There is a minimum cropping area of the image asset called the Retailer safety zone. This Retailer safety zone will change with each preset scaling of the asset. Both Brand safety zone and component placeholders are centered in the image, therefore the background image needs to be centered within the branding zone and cropped on all sides.

83f4b2ae0039dd12d9c33199308c2592fba8090c649bf0fc10eb2ffcc05f1ebe 251211_ _Ingrid_Web_Asset

Brand Safety Zone The Brand safety zone is the area that is always guaranteed to be visible and unobstructed. The brand will design all their main messaging and critical visuals within this area. Component Placeholders
Two equal internal placeholders are used for legal text and a call-to-action (CTA) button. These are treated as margins and ensure no overlap with the Brand safety zone. Scaling Rules
Depending on the device and grid size, the background image is displayed at one of the following scales:

26% (390×390),
33.33% (500×500),
or 50% (750×750).

0e779e4ae321fbe5c92e9a00e8966732fe986acc9e7510b8b7692a016156810a 251118_ _Ingrid_Image_behaviour

Grid-Based Scaling Presets

These presets define the image scale based on standard grid tile dimensions:

Mobile Grid
When the device is mobile and the tile width is between 140 and 180 pixels, and the height is between 257 and 390 pixels:
- the image is displayed at 26% scale (390 by 390 pixels).
- The Retailer safety zone is 140 px by 258 px.
  - Brand safety zone is 140 px by 195 px.
  - Each component placeholder is 140 px by 31 px.
Regular Grid
For tile widths between 180 and 500 pixels and heights between 300 and 500 pixels:
- the image is displayed at approximately 33% scale (500 by 500 pixels).
- The Retailer safety zone is 180 px by 330 px.
  - Brand safety zone is 180 px by 250 px.
  - Each component placeholder: 180 px by 40 px. .
Large Grid
- When the tile width is greater than 270 pixels and the height is greater than 500 pixels
  - the image is displayed at 50% scale (750 by 750 pixels).
  - The Retailer safety zone is 270 px by 495 px.
    - Brand safety zone is 270 px by 375 px.
    - Each component placeholder: 270 px by 40 px.

Retailer Safety zone in-grid - Dimensions for Mobile, Regular and Large grid tiles

Flexible Scaling Rules

In specific layout scenarios, the image scales differently depending on the aspect ratio and size constraints.

Long and Narrow Grids

The image scales to fit the tile height if all the following conditions are true:

Grid width is between 180 and 270 pixels.
Grid height is greater than 500 pixels.
The height-to-width ratio is less than 2.78.

Wide or Double-Tile Grids

The image scales to fit the tile width if all the following conditions are true:

Grid width is greater than 500 pixels.
Grid height is greater than 500 pixels (minimum 332 pixels).
The width-to-height ratio is less than or equal to 1.5.

8861f6c936f4a54cc27dd58e15d0e97f506e2d1677d0fa7d878062e1584a3691 251127_ _Ingrid_Image_behaviour_2

Non-compliant Tile Dimension

If the grid tiles do not match any of the above scenarios, other solutions can be determined and implemented as long as the Retailer safety zone and Brand safety zone is respected within the image.

Alternative Mobile Layout

This layout variant is optimized for mobile devices and single column product grids/lists.

Background Image

The background image size is 1280 by 400 pixels or 1200 by 1000.
- 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.

Alternative mobile layout for the Branding Display Grid Solo format

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 Grid 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 at the bottom of the branding zone or above the legal text. When the user clicks on button, they will be redirected to the link.

CTA example for the Branding Display Grid Solo format

Legal Text

Legal text can be added as an option and is always visible (90 characters maximum, including spaces).

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”.

93a353fcb66d34c43a2854f7fd67a99df7b85534c02f6061be0d485e837fd8e5 bdgs more info

"More Info" with CTA and legal text example for the Branding Display Grid 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

5300e7411a415031b4c44f7069303b47979bdbd65d96373459da29b38b5de3a4 bdgs color mode

Technical Details

Responsive

The rendering is based on the grid of the page and detected device.

Styling

Element styles, such as fonts and button corner radius, are determined by the retailer and the following details shows our default styles. However, button and text area dimensions must be adhered to so that the Retailer Safety Zone, Brand Safety Zone and component placeholders are respected.

Call-to-Action (CTA) Button

Max characters: 25
Size: 150 by 30 pixels
Font: Roboto Regular, 12 pixels
Margin
- Grid layout: 5 pixels below button
- Alternative Mobile Layout: 8 pixels between branding zone and button

Legal Text and More Info

Desktop

Detail	Legal text	More info
Height	40 pixels	Dynamic, based on text length
Padding	5 pixels on both the left and right sides of the tile	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)

Dimensions and spacing for the Branding Display Grid Solo format (Web)

Alternative 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, above and below
- 10 pixels between CTA button and text
Font: same as Grid layout
Max characters: same as Grid layout
Background: Displayed over a colored layer (the layer color adapts based on color mode)

Dimensions and spacing for the Branding Display Grid Solo format (Mobile)

Layout and Borders

Grid layout (desktop and mobile): 1px border surrounds the branding zone.
Alternative Mobile Layout: 2px border surrounds the branding zone.

Background Image

Grid layout (desktop and mobile):
- The background image is centered and is cropped from all sides
- Image size rendering is determined by grid-based scaling presets
Alternative Mobile Layout:
- The background image has a fixed position and is never cropped
- It scales proportionally to fit its container.

Response Keys

`Name (API key)`	Description / Parameter	Description
`background_image`	required:`true` maxBytes:`307200` extensions:`[“jpg, png, gif”]` width:`1500` height:`1500` safeZoneWidth:`540`safeZoneheight:`750`	Background image that can be used for desktop and mobile. The mobile image can be hidden through override if needed.
`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 the mobile ad.
`mobile_background_image_alt_text`	required:`true` maxChars:`120`	Text description of the mobile background image for ADA compliance.
`redirect_url`	required:`true`	URL users are redirected to upon clicking the background image or CTA button.
`redirect_target`	required: true Options: `_self`,`_blank`	Determines if the redirect opens in the same tab (`_self`) or a new tab (`_blank`).
`redirect_url_app`	required:`true`	App-specific URL users are redirected to when clicking the CTA from an app environment.
`cta_text`	required:`true` maxChars:`20`	Text displayed on 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`	Always-visible legal copy. Shown next to the CTA on desktop, and persistently on mobile and app.
`more_info_text`	maxChars:`180`	Supplemental legal information. Visible on hover on desktop (“i” icon), and persistently on mobile and app.
`color_mode`	default:`lightmode`Options:`lightcommand`,`darkcommand`	Sets visual mode for optimal readability. Light mode uses white text on dark backgrounds; dark mode uses dark text on light backgrounds.

Response Example

{
  "status": "OK",
  "placements": [
    {
      "viewSearchResult_API_branding-display-grid-solo": [
        {
          "format": "BDGS",
          "products": [],
          "rendering": {
            "background_image": "https://cdn.example.com/assets/desktop-banner.jpg",
            "background_image_alt_text": "Accessible description of the desktop background image",
            "mobile_background_image": "https://cdn.example.com/assets/mobile-banner.jpg",
            "mobile_background_image_alt_text": "Accessible description of the mobile background image",
            "redirect_url": "https://www.example.com/product-page",
            "redirect_target": "_self",
            "redirect_url_app": "app://example/product-page",
            "cta_text": "Shop Now",
            "cta_text_color": "#FFFFFF",
            "cta_color": "#CCCCCC",
            "legal_text": "©2025 Example Corp. All rights reserved.",
            "more_info_text": "Click for details, terms, and conditions.",
            "color_mode": "lightcommand"
          },
          "OnLoadBeacon": "//b.us5.us.criteo.com/rm?rm_e=...",
          "OnViewBeacon": "//b.us5.us.criteo.com/rm?rm_e=...",
          "OnClickBeacon": "//b.us5.us.criteo.com/rm?rm_e=...",
          "OnBundleBasketChangeBeacon": "//b.us5.us.criteo.com/rm?rm_e=..."
        }
      ]
    }
  ]
}

​Introduction

​Rendering Example

​CodePen

​Desktop

​Mobile

​Specifications

​General

​Assets Size and Behavior

​Background Image Specifications

​Grid-Based Scaling Presets

​Flexible Scaling Rules

​Long and Narrow Grids

​Wide or Double-Tile Grids

​Non-compliant Tile Dimension

​Alternative Mobile Layout

​Background Image

​Available Options

​Redirection

​Call to Action (CTA)

​Legal Text

​More info

​Color Mode

​Light mode

​Dark mode

​Technical Details

​Responsive

​Styling

​Call-to-Action (CTA) Button

​Legal Text and More Info

​Layout and Borders

​Background Image

​Response Keys

​Response Example

​What’s next

Introduction

Rendering Example

CodePen

Desktop

Mobile

Specifications

General

Assets Size and Behavior

Background Image Specifications

Grid-Based Scaling Presets

Flexible Scaling Rules

Long and Narrow Grids

Wide or Double-Tile Grids

Non-compliant Tile Dimension

Alternative Mobile Layout

Background Image

Available Options

Redirection

Call to Action (CTA)

Legal Text

More info

Color Mode

Light mode

Dark mode

Technical Details

Responsive

Styling

Call-to-Action (CTA) Button

Legal Text and More Info

Layout and Borders

Background Image

Response Keys

Response Example

What’s next