Content header

Overview

The content header allows you to highlight information at the top of your page. The copy varies and can be supported visually with a plain color/gradient background, an image or a video.

The content header is visually similar to the homepage banner but these are two different components. The homepage banner component is only on the homepages and has different options. The content header can be used on every other pages on all segments. It’s important to understand the difference and use the correct template when producing a visual.

Live demo (For Proximus employees)

---

Anatomy

Here is a quick overview of what a content header contains to better understand this documentation. This case shows all the content possible inside a content header 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. Patch and/or text/price
   Could be a promo patch with or without price, an info patch with or without text or a price without a patch.
4. Countdown
5. Text content
6. Default link
7. Advantage or bullet list
   Can be hidden in mobile.
8. Buttons
   Always comes last in the content header. You can use a primary, secondary and/or a tertiary button.
9. Visual as content
   Can be an image, a animated GIF, a video or a media device. It appears as content at the right for desktop and at the bottom of the content header on mobile.

---

Compositions

There are two types of content headers: default and immersive. Both have exactly the same structure and elements.

1. Default content header
   This content header is just below the header. The visual is not passing through the header.
2. Immersive content header
   This content header appears behind the header which is in negative and slightly transparent. There's an additional space on top of the content.

There are no specific guidance on which content header to use, it’s up to your designer eye. If you have a beautiful visual and want it to take as much place as possible, the immersive content header might be a good option.

---

Gridding

Content headers are always taking the entire width of the screen, only the content is in a gridding. In mobile, the content can be on two griddings: 7 or 12 grids.
In desktop, content on the left can be in a grid 6 or grid 10. When there's a content video on the right, the content on the left is automatically set on 6 grids.
It is important to know how much space the content will take before producing the visual so that you can optimize your space.

---

Options

Full clickable

When there is only one CTA, the content header can be fully clickable.

Overlap

An element can overlap the content header (for all breakpoints) at the bottom on the content header. Components such as a perso box, sysnav,... This is important to know before producing the visuals so you don't put important visual informaton behind the overlap element.
The element has an overlap of 40px on dekstop and 20px on mobile to add on top of the default paddings of the content header.

Big version

For an extra big content header, there’s the possibility to add an extra space below the content header’s content: 30px in mobile, 70px in desktop. This will give more space to the visual. These big versions are mostly used for the TV options pages where we want really immersive visuals.

Visual as content

Visual appears as content at the right for desktop and at the bottom of the content header on mobile. It can be a simple image, a video uploaded via Vimeo or an animated GIF. For more information please refer to the content visual documentation. In some case it can also be a Media device.

Image below on mobile

On mobile, we have the option to display the image below the content, ensuring a complete visual experience without any content overlap. However, on desktop, the visual is presented as a background image.

---

Accessibility

Visuals (image or video) or colors are mostly used as background of the content headers. And so, content need to be accessible on these backgrounds.

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

HTML text is in purple and black so the background needs to be light enough in order to be accessible.

Negative mode

HTML text is white so the background needs to be dark enough in order to be accessible.
In case of an immersive content header, please also make sure to darken the background behind the header.