Proximus Media Guides

Mosaic

Box with a visual next to the content.

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

Overview

The mosaic is a panel that you can put anywhere on a page. It can contain a title, content text, patches and CTAs. The visual comes at the right or at the left of the content.

Live demo (For Proximus employees)

Anatomy

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

  1. Title
  2. Content (optional)
  3. Buttons (optional)
    Always come last in the media box. You can use a primary, secondary and/or a tertiary button
  4. Patch (optional)
    Always comes on the upper right corner in overlap. You can use the promo, info, multi-mobiles advantage or Belfius patch.
  5. Visual
    Always comes next to the content at the left or at the right.

Compositions

The visual always comes next to the content in desktop and in mobile. You can put the visual at the left or at the right and switch it up if you have multiple mosaic per rows.

Desktop
Mobile

Gridding

Gridding usage

The composition options are based on our default grid. Please refer to the gridding article for more information.

You can have a maximum of 2 mosaics per row in desktop.
In mobile you can only use one per row on a grid 12 or else the content is too narrow.

Desktop
Mobile

Accessibility

The content and the medias are separated and do not overlap so there should be no accessibility issue.

Positive mode
Negative mode
last modified: 01/01/1601 01:00:00

How to

Please use the template and respect the following guidances:

  1. Adapt the height of your template according your mosaic height online. If you don't resize the height of the template, margins and safe areas will not be accurate!
  2. Produce a visual for all breakpoints (s, m & l).
  3. Test your visuals and adapt if needed
  4. 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:

Breakpoints Size Max weight Format
Mobile (-s) 240x? (height depends on content) 50KB .jpg
Tablet (-m) 502x? (height depends on content) 80KB .jpg
Desktop (-l) 393x? (height depends on content) 80KB .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 page
  2. Date
    yymm = year month (2108 = August 2021)
  3. Component
    mosaic
  4. Breakpoint
    mobile (-s), tablet (-m) or desktop (-l)
  5. 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