Introduction

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

Rendering Example

Desktop

Mobile

Specifications

General

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

Assets Size and Behavior

Dimensions
Background image size: 1500 x 1500 px with a safety zone of 540 x 740 px.

Device Support This asset can cover both desktop and mobile/APP placements based on the detected device and layout.

Component Placeholders
There are two component placeholders which are margins, ensuring that available options (legal text and CTA) are not clashing with the safety zone.

Alignment and Cropping Both 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.

Scaling Rules
Based on the device and grid size, the background image is displayed at one of the following scales:

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

Fallback Behavior If the image's width or height exceeds 750 pixels, or if it does not align with the grid layout, a background color can be applied as a fallback.

Grid-Based Scaling Presets

• Mobile grid
  When a mobile device is detected, and the grid width is between 140 and 180 pixels and the height is between 257 and 390 pixels, the background image is displayed at 26% of its original size (390×390). The Retailer Safety zone is 140 px by 258 px.
• Regular grid When the grid width is between 180 and 500 pixels, and the grid height is between 300 and 500 pixels, the background image is displayed at approximately 33% of its original size (500×500). The Retailer Safety zone is 181 px by 330 px.
• Large grid When the grid width is greater than 270 pixels and the height is greater than 500 pixels, the background image is displayed at 50% of its original size (750×750). The Retailer Safety zone is 270 px by 495 px.

Scaling Rules

Long and thin grid
When the grid width is between 180 and 270 pixels, the height is greater than 500 pixels, and the ratio of height to width is less than 2.78, the background image is scaled to fill the height of the grid.

Extra wide or double-tile grid When the grid width exceeds 500 pixels, the height is also greater than 500 pixels (with a minimum of 332 pixels), and the ratio of width to height is less than or equal to 1.5, the background image is scaled to fill the width of the grid.

Alternative Mobile Layout

An alternative layout can be used for mobile.

• Background image size: 1280x400 or 1200x1000. Please note that only one of these size will be used once chosen.
• The creative width is equal to 100% of the parent div. It scales in proportion. When the width reduces, the height reduces as well. The background image is never cropped.

Available Options

Redirection

When a user clicks on the branding zone, they should be redirected to the link defined within the response. There are two possible redirection options:

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

A Call to Action (CTA) button can be added as an option.

Legal Text

Legal text can be added as an option and is always be 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. It is always visible on mobile or is displayed when the user click on see more.

Color Mode

The advertiser can choose between two preset color modes to ensure the best contrast between legals 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

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

Web

CTA Button

• Size: 150x30px
• Font: Roboto Regular 12px

Legal Text & More Info

Space size occupied by legal depends on the tile width. There should be 5px padding on both the right and the left side of the tile. The legals are in front of a layer (which color depends on the color mode).

Font: Roboto Regular 12px and 10px on mobile in grid.
The legal text height should be fixed at 40px. More info height depends on the length of the text.

Mobile

• The creative width is equal to 100% of the parent div. It scales in proportion.
• When the width reduces, the height reduces as well. The background image is never cropped.
• The banner is 100% of the width of the device, and scales the creative proportionally.

Response Keys

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=..."
        }
      ]
    }
  ]
}