Proximus Media Guides

Banner slider

A section with multiple contents in slides

last modified: 01/01/1601 01:00:00

Overview

The banner slider is a section with multiple contents on a same row. They contain an icon, a title, subtitle, copy, CTAs and/or visual and you navigate through those contents with arrows.

Discover the carousel component in the Design System

Live demo (For Proximus employees)

Anatomy

Here is a quick overview of what a banner slider contains to better understand this documentation:

  1. Icon (optional)
    More info
  2. Title
  3. Subtitle (optional)
  4. Patch (optional)
    More info
  5. Content (optional)
  6. Buttons (optional)
    Either a primary, secondary or tertiary button or multiple of them. More info
  7. Copyright (optional)
    Needed for the visual if it promotes a tv content for example
  8. Navigation arrows
    The arrows are always visible in the banner slider or just below it

Compositions

Default slider with a background image.

The composition of the slider is set to the grid. On desktop, you can set the slider's grids to 4, 6 or 12. This slider uses a background image that you can hide in mobile.
In mobile you can set the slide to a gridding 12 or 6.
For this display, use the template name-2111-default-bg-banner-slider.psd

Desktop
Mobile
Outgrid slider with a background image

On desktop, the outgrid option allows you to set the slider's width to the number of columns you need. This slider extends out of the grid to the left or to the right. This slider uses a background image that you can hide in mobile. In mobile the slider take the full width.
For this display, use the template name-2111-og-banner-slider.psd

Full width slider with a background image

The full width option allows you to set the slider's width to full width on desktop and mobile. This slider uses a background image that you can hide in mobile.
For this display, use the template name-2111-full-bg-banner-slider.psd

Full width slider with a content image

The full width option allows you to set the slider's width to fullwidth on desktop and mobile. This slider uses a content image that comes next to the content in desktop or below it in mobile. You can hide the content visual in mobile.
For this display, use the template name-2111-content-banner-slider.psd

Desktop
Mobile

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.

Accessibility - Contrast is the most important consideration

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
last modified: 01/01/1601 01:00:00

How to

Please use the template and respect the following guidances:

  1. Choose the correct template (check usage tab > compositions)
  2. Adapt the height of your template according your slider height online (dependant on the content)
  3. Respect the margins and safe areas in the template. If you don't resize the height of the template to your slider online beforehand, margins and safe areas will not be accurate!
  4. Produce a visual for each breakpoints (mobile (-s), tablet (-m) and/or desktop (-l)).
  5. If using a background image make sure people's faces are not behind the content and that it is still readable
  6. Test your visuals and adapt if needed
  7. Make sure your visuals are not too heavy and compress if needed.
Template download

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:

Default background slider
Breakpoints Size Max weight Format
Mobile (-s) 640x? (height depends on content) 50KB .jpg
Tablet (-m) Depending on the gridding and content 120KB .jpg
Desktop (-l) Depending on the gridding and content 150KB .jpg
Outgrid background slider
Breakpoints Size Max weight Format
Mobile (-s) 640x? (height depends on content) 50KB .jpg
Tablet (-m) 502x? (height depends on content) 120KB .jpg
Desktop (-l) 1270x? (height depends on content) 150KB .jpg
Full width background slider
Breakpoints Size Max weight Format
Mobile (-s) 640x? (height depends on content) 50KB .jpg
Tablet (-m) 1024x? (height depends on content) 150KB .jpg
Desktop (-l) 2560x? (height depends on content) 200KB .jpg
Content visual
Breakpoints Size Max weight Format
Mobile, tablet, desktop 400x? (height depends on content) 60KB .jpg
How to compress images

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:

  1. Name
    Description of the visual, campaign or content
  2. Date
    yymm= year month (2108= August 2021)
  3. Direction (optional)
    left, right or full for a full width background
  4. Type (optional)
    Background, og (=outgrid) or content visual
  5. banner-slider
  6. Breakpoint
    mobile (-s), tablet (-m), desktop (-l)

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