Proximus design system
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Background out of grid

Extended background images or videos going out of the gridding

last modified: 15/09/2023 15:55:10

Overview

The background out of grid allow you to extend your background until left or right screen width. There is three types of it :

  1. Background out of grid left
  2. 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.


Background colors

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.

Accessibility

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.

Accessibility

  • 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.

last modified: 15/09/2023 15:55:10

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).