Expand panel

Overview

The expand panel is a box that you can put anywhere on a page. It opens up a larger panel below for more information.

Live demo (For Proximus employees)

---

Anatomy

Here is a quick overview of what an expand panel contains to better understand this documentation:

1. Icon or visual (optional)
   Always at the top, before any other content. Visual is for logos, apps.
2. Title
3. Subtitle (optional)
4. Content (optional)
5. Price (optional)
6. Buttons
   Always come last in the media box. You can use a primary, secondary and/or a tertiary button
7. Expand button
   It comes just below the box and allows to open up a panel.
8. Panel expanded
   A large box that usually takes the whole grid. It contains any desired information and opens up just below the expand panel.
9. Close button
   Revealed once the expand panel is opened. Always comes on the upper right corner of the panel.

---

Composition

Expand panel with a background image

The visual is the background of the box and doesn't impact the expanded panel below. You can put the copy content in a gridding to give space for the visual in desktop. In mobile you can either delete the background visual or add extra space below the content to give space for the visual.
For this display, use the template name-2010-pe-bg-img.

---

Options

Icon as a content visual

As seen just before in the anatomy part, you can use a small visual instead of an icon in the box. It always comes at the top of the box.
The size of your visual won't be resized so make sure you create a visual with reasonable dimensions: not too big, not too tiny. This space is reserved for logos or apps logos.
For this display, use the template name-yymm-panel-content-img as guidance.

Content visual in the expanded panel

You can also put a visual in the opened panel just below.
For this display, use the content visual template name-2010-content.

---

Gridding

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

---

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.

Positive mode

Negative mode

---

Best practices

Respect the margins and safe areas in the template and make sure that the main content isn’t placed behind the title, copy or else (e.g.: main character, faces, devices, objects).