Proximus Media GuidesOverlayer
Overlayer inform users about a task and can contain information, require decisions, or involve multiple tasks.
Overview
Overlayer inform users about a task and can contain an image to illustrate the purpose. 2 sizes exist for the overlayer with the width as main difference.
Discover the Overlayer component in the Design System
Default image overlayer
In the default image overlayer, the image is showed at the right of the content on desktop and at the top on mobile.
Small image overlayer
In the small image overlayer, the image is showed at the top on all breakpoints.
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
In the overlayer component, there is only one element on top of the image: the close button and it's existing only in positive mode. The close button has a light purple background. Be carefull to keep this button always enough visible.
How to
Please use the template and respect the following guidances:
- Choose the right template: default overlayer or small overlayer
- Adapt the height of your template according to the height of your modal
- People's faces are not behind the close button
- Make sure the area behind the close button is accessible
You're part of Proximus organization? Go to the template - If not, request it
Technical specifications
Please respect the following specifications when you export the images:
Default image overlayer
| Breakpoints | Size | Max weight | Format |
|---|---|---|---|
| Mobile (-s) | 350x200px | 50KB | .jpg |
| Tablet (-m) | 450x405px | 70KB | .jpg |
| Desktop (-l) | 500x450px | 80KB | .jpg |
Feel free to adapt the height according to your modal. It may vary with the content
Small image overlayer
| Breakpoints | Size | Max weight | Format |
|---|---|---|---|
| Mobile (-s) | 350x200px | 50KB | .jpg |
| Desktop (-l) | 580x200px | 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
Please respect the following naming convention:
- Name Description of the visual
- Date yymm = year month (2108 = August 2021)
- small (optional) Only for the small overlayer
- modal
- Breakpoint mobile (-s), tablet (-m), desktop (-l)
- 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