Webshop banner

Overview

The webshop banner is a box with a visual on top of the webshop flow pages. It illustrates the content of the page.

Live demo (For Proximus employees)

---

Anatomy

Here is a quick overview of what a media box contains to better understand this documentation:

1. Title
   It can be a title followed by some copy content.
2. Visual
   It can be a content visual or a background visual but the main focus should always be on the right of the banner to not be hidden by the title. (see compositions)

---

Compositions

There are two ways to display a visual in the webshop banner. Either you have a banner with a background image or with a content image.

Webshop banner with a background image

The visual is the background. The copy content is in a gridding which gives space for the visual on the right of the boxe.
For this display, use the template name-yymm-webshop-bg.psd

Webshop banner with a content image

The visual comes on top of the box, not in the background. This ensures accessibility since the visual is separated from the content. This composition also creates depths by overlapping the visual on the banner. For this composition, the visuals' sizes can differ depending on the needs.
For this display, use the template name-yymm-webshop-content.psd

---

Accessibility

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.

Positive mode

Negative mode

---

Best practices

Respect the margins and safe areas in the template and make sure that the main content isn’t placed behind the title, copy or else (e.g.: main character, faces, devices, objects).