Proximus Media GuidesMedia boxes
Boxes that give you some info such as title, subtitle, prices, content, CTAs...
Overview
The media box is a panel that you can put anywhere on a page. It can contain a title, icons, content text, prices and promo patches, CTAs.
Live demo (For Proximus employees)
Anatomy
Here is a quick overview of what a media box contains to better understand this documentation:
- Icon (optional) Icons are always at the top (desktop) or next to headings (desktop & mobile), before any other content.
- Title
- Subtitle (optional)
- Content (optional)
- Price (optional)
- Buttons Always come last in the media box. You can use a primary, secondary and/or a tertiary button
- Patch (optional) Always comes on the upper right corner in overlap. You can use the promo, info, multi-mobiles advantage or Belfius patch.
Compositions
There are two ways to display a media box. Either you have a media box with a background image or with a content image.
Media box with a background image
The visual is the background. You can put the copy content in a gridding to give space for the visual in desktop. In mobile you can either delete the background visual or add extra space below the content to give space for the visual. For this display, use the template name-2010-mb-bg-img
Media box with a content image
The visual is separated from the copy. It comes next to the copy in desktop at the right or at the top. In mobile you can put it before or after the copy. For this display, use the template name-2010-mb-content-img
Gridding
The composition options are based on our expanded grid. Please refer to the gridding article for more information.
You can have a maximum of 3 media boxes per row in desktop.
Vertical and horizontal spacings between Media boxes are 40px.
In mobile you can only use one per row on a grid 12 or else the content is too narrow.
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.
Our websites and applications have to be accessible, meaning perceptible, operable, understandable and robust for users with disabilities. Discover here our accessibility guidance.
The visual presentation of text has a contrast ratio of at least 4.5:1. Success criterion 1.4.3 Contrast
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).
Don't
Do
How to
Please use the template and respect the following guidances:
- Choose the right template (cf usage > compositions)
- For content image at the right on desktop, adapt the height of your template according your media box height online. If you don't resize the height of the template, margins and safe areas will not be accurate!
- Choose the artboard according to the gridding of your media box (only for desktop since there's only one possible gridding for mobile).
- In your template, define the copy gridding in desktop if needed and place the important subject of your visual accordingly. In mobile you can't place your copy in a specific gridding.
- People's faces are not behind the text or the patch.
- Test your visuals and adapt if needed
- Make sure your visuals are not too heavy and compress if needed.
You're part of Proximus organization? Go to the template - If not, request it
Technical specifications
Sizes are for reference and guidance, note that they may change with the content or gridding. But in most case refer to the following specifications when you export the images:
Media box - background image
| Breakpoints | Size | Max weight | Format |
|---|---|---|---|
| Mobile (-s) | 640x? (height depends on content) | 80KB | .jpg |
| Tablet & Desktop (-m) | Depending on the gridding and content | 80KB | .jpg |
Media box - content image
| Breakpoints | Size | Max weight | Format |
|---|---|---|---|
| Mobile (-s) | 640x300px | 80KB | .jpg |
| Tablet & Desktop Right (-m) | 400x? (height depends on content) | 80KB | .jpg |
| Tablet & Desktop Top (-m) | Grid 6: 570x240px Grid 5: 468x220px Grid 4: 366x200px | 80KB | .jpg |
To ensure good UI quality and website performances, it's very important to respect the maximum weight indicated while keeping a correct image quality. Discover here our images compression recommendations.
Naming convention
When exporting your visuals, make sure you use the correct naming. Do not use caps, spaces, accents or symbols (except a dash - ) Please respect the following naming convention:
- Name Description of the visual, campaign or page
- Date yymm = year month (2108 = August 2021)
- Component mb (=media box)
- Gridding (optional) gX (=number of grids your media box takes)
- Composition bg (=background) or content
- Image
- Breakpoint mobile (-s) or desktop (-m)
- Language (optional) English by default (-en), French (-fr), Dutch (-nl). If it exists in only one language, it isn't mandatory to specify.
Images testing
Testing your image(s) is an important step of the images creation. It allows you to test the behavior in all breakpoint and to ensure the quality of the end results.
Discover here our images testing recommendations