Proximus design systemDevPlease don't forget to read Usage part of each element.
Background out of grid
Extended background images or videos going out of the gridding
Overview
The background out of grid allow you to extend your background until left or right screen width. There is three types of it :
- Background out of grid left
- Background out of grid right
Background is set on the gridding
You are free to choose the position of your background according the gridding. Read more about the gridding
Extended plain background color
A plain background color can be extended until left or right screen width. You have the possibilty to fill only the half of the container height 1.
Please follow the rules of the background colors to ensure accessibility and the respect of Proximus Guidelines.
Extended image background
A background image can be extended until left or right screen width.
Please check the contrast between the image and the text. ( Minimum contrast ratio between text and background should be, for regular size 4.5:1, and for large text 3:1 )
Extended video background
A background video can be extended until left or right screen width.
- Please check the contrast between the video and the text. ( Minimum contrast ratio between text and background should be, for regular size 4.5:1, and for large text 3:1 )
- Add a controller on the video to control the sound and the state of it.
Extended plain background color
A plain background color can be extended until left or right screen width just by adding rs-bg-ext-left
or rs-bg-ext-right
on the element containing the background color class.
rs-bg-ext-left
rs-bg-ext-right
Half height extended plain background color
A plain background color can be extended until left or right screen width but on half of the container height just by adding rs-bg-ext-left-semi
or rs-bg-ext-right-semi
on the element containing the background color class.
rs-bg-ext-left-semi
rs-bg-ext-right-semi
Extended image background
A background image can be extended until left or right screen width.
On the wished grid, you need to add a <div class="rs-outgrid">
and add on it the needed class rs-outgrid-left
or rs-outgrid-right
and add a minimum height to ensure a minimal image visibility.
Than the image should be added with lazy load code on a nested <div class="rs-outgrid-content">
with a whished background class (ex: rs-bgi-cover-cc
).
Extended video background
A background video can be extended until left or right screen width the same way as an image (see above section) but with the following difference:
On the nested <div class="rs-outgrid-content">
a background color should be added (ex: rs-bg-black
) and rs-bg-video-wrapper
Inside this <div>
, <div class="rs-bg-video rs-bg-video-cc">
should be added and contain the <video>
with lazy load and a temporary image (poster).