Content media

Overview

The content media is an entire section with content and a visual/video next to it. You can use a content media or multiple anywhere on your page and give all kinds of information.

Live demo (For Proximus employees)

---

Anatomy

Here is a quick overview of what a content media contains to better understand this documentation. This case shows all the content possible inside a content media but all of the elements are optional except the title which is mandatory. The order of those elements is predefined and you can’t swap places.

1. Title (mandatory)
   Explore headings specificities within our Design System.
2. Subtitle
3. Free content
4. Buttons
   Always comes last in the content media. You can use a primary, secondary and/or a tertiary button.

---

Compositions

There are three types of content medias: extended image, extended content and background visual. Visual can either be placed on the left or on the right. They all have exactly the same structure and elements.

Extended image

The visual takes more space and goes from the middle to one border of the screen. The content can be put in a colored panel.

Extended content

Emphasis on the content, the visual is smaller and fits into an imaginary box. The content can be put in a colored background. It is possible to display a video instead of a visual.

Background visual

Visual takes the whole width of the screen and appears behind the content.

There are no specific guidances on which composition to use, it’s up to your designer eye.

---

Gridding

Content media are sections that take the entire width of the screen, only the content is in a gridding. Content can be put at the left or at the right and either take 6 grids or 4 in desktop. In mobile, content always takes 12 grids.

---

Options

Content without colored background

The content can be put in a colored panel/background, but you can also display it without any background color.

Big version

For a more immersive content media, there's the possibility to add extra spaces above and below the content: 80px on top and bottom in desktop (not allowed on mobile).They will give more space to the visual. The big version better works with small content to keep this immersive effect.

1. Content media spacings (by default)
   These spacings can't be removed and are by default surrounding the content.
2. Extra spacings for big content media
   They come just above and under the content of the component, before the default Spacings.

Additional spacings

Spacings are incorporated inside the content media component, before and after the content. They do not surround the visual. Meaning if you put two content medias under each other, the content will be separated by the spacings around the content but the visuals will stick to each other. You can decide whether you want to add additional spacings between the two sections or if you want to keep it as is.

1. Additional spacings (optional)
   They come above and under the content media section
2. Content media spacings (by default)
   These spacings can't be removed and are by default surrounding the content.

---

Accessibility

In most cases the content and the medias are separated and do not overlap so there should be no accessibility issue. But if using the full background image please make sure everything is accessible.

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.

Positive mode

Negative mode