Image standalone

Overview

The homepage banner with image standalone allows you to promote a device or multiple devices at the top of the homepage page with a full background image and a png visual on top. This banner is used on top of each Business Unit homepage:

Residential homepage - Small entreprise homepage - Corporate homepage

The image standalone banner combines the image background banner and a png visual that comes on top and at a defined place on the banner. This banner allows you to always keep the devices visible and to reuse the background image for multiple campaigns.

Live demo (for Proximus employee): Residential homepage

---

Anatomy

Here is a quick overview of what a image standalone banner contains to better understand this documentation:

1. Background image
   Background image of the banner, it takes the full width of the page.
2. HTML content
   This HTML content is used to promote the product/service. It consists of the components of the Design System, which are usually: a heading, a subtitle, a promo patch with its info and a button.
3. Perso box
   The perso box is a white panel which is not part of the banner but which overlays the banner.
4. Image standalone
   The png visual is placed on top of the background.

---

Gridding

The background image covers the entire banner in full width. HTML content comes on top of the image such as the perso box and the image standalone. The banner is designed in such a way that the image standalone will always have space and be visible in all breakpoints. The image standalone is where the key elements of the campaign such as devices, objects are located. The background image will be the background visual of the campaign for example.

In the classic 12-column gridding, the text content takes:

• Mobile: 7 columns for copy - 5 columns free space for the standalone visual
• Tablet: 6 columns for copy - 6 columns free space for the standalone visual
• Desktop: 5 columns for copy - 7 columns free space for the standalone visual

---

Modes

In this component, HTML elements are added on top of the image. This content is in positive or negative mode and this affects the creation of the image. Image colors should be carefully considered, with legibility and accessibility as paramount concerns.

---

Best practices

Respect the margins and safe areas in the template and make sure that the main content isn’t placed behind the perso box or in the copy (e.g.: main character, faces, devices, objects). The png visual is placed as so the visual won't get in the way of the header, copy etc.