Proximus design system
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Panel

This component is the most basic and extendable asset to fit content into. You can customize panels to match almost any use cases. Panels are build to fit into our grid system, allowing them to have variable width.

last modified: 30/09/2021 11:10:06

Types

Panel can be extended with several functionalities:

Read-only

A simple default panel to enclose your content. Panels have always 4 rounded corners. You can customize background (color or images) as well as content inside. Panels offer 2 sizes of gutters in case you need more or less space around the content.

Clickable

This option allows your panels to be fully clickable, working as navigational element to drive user to another page. Clickable panel cannot contain multiple navigation elements inside. Behaviour is limited to one destination.

Expandable

Expandable panels are useful when hiding/showing larger amount of content is needed. When expanded, another panel appears underneath the panel with an arrow pointing to it. This new panel can also be customized.


States

Clickable

  1. Hover if panel doesn't contain a clickable element
    State visible when the cursor hovers the panel. The panel is fully clickable and a hover effect is applied on the panel itself. Cursor becomes a pointer.

  2. Hover if panel contains a clickable element
    State visible when the cursor hovers the panel. The panel is fully clickable and there is not hover effect on the panel itself because the hover effect is applied on the clickable element. Cursor becomes a pointer.

Expandable

  1. Hover
    Container background can be customized whether by choosing a color, a gradient or an image.

  2. Opened
    State visible when clicked. The panel expand opens, allowing the content inside to be displayed.


Anatomy

  1. Panel container
    Container background can be customized whether by choosing a color, a gradient or an image.

  2. Panel title (optional)
    Title give some context about the panel itself, depending on the use of the panel, the title is an optional content. Though it's size is always the same.

  3. Grid
    Grid allows to populate the panel in numerous way.

  4. Expand action panel (expandable type)
    Toggle a panel underneath it when clicked on.
    A single accordion is used within the expand action panel to show the expandable function to the user.

  5. Expand panel container (expandable type)
    This container appears when the expand action is triggered, similar to the panel, this one has a pointing arrow towerds the panel it expands.

  6. Grid
    Grid allows to populate the panel in numerous way.

  7. Close button
    Closes the panel expand when clicked on.
    Refer to close action link for more info.


Composition

Composition of panels is set to the grid. We can have maximum 4 columns per row in desktop and we we recommend one panel per row on mobile.

The height of the boxes is based on the highest box of the row.

Do
The height of the boxes is based on the highest box of the row.

Don't
The height of the boxes is based on each box content.

last modified: 30/09/2021 11:10:06
Info box

Please refer to the font sizes and colors default values.

Size

Mobile Tablet Desktop
1. Default panel container paddings All: 2rem
2. Big panel container paddings Top/Bottom: 2rem
Left/Right: 2rem
Top/Bottom: 3rem
Left/Right: 2rem
Top/Bottom: 4rem
Left/Right: 4rem
3. Border radius 0.5 rem
4. Icon font size Size 12
5. Panel title font size Size 6
6. Expand action panel paddings All: 2rem
7. Expand action panel border radius Top: 0rem
Bottom: 0.5rem
8. Single accordion Refer to single accordion for more info.
Big panel

Big panel is a default panel size option, it implies a padding change but does'nt influence the other panel elements. A title in a default panel or in a big panel will have the same size for example.

Expandable panel

Expand panel container is considered a default panel. For the close icon, refer to close action link.

Clickable panel - Hover state

Attribute Value
1. Hover - Move up 0.5rem
2. Hover - Shadow 0px 0px 11px 0px rgba(0, 0, 0, 0.2)

Colors

Light theme

Background color

All available background colors can be used as panel background color but here are the recommendations:

  1. On a white background color section, prefer grey2 as panel background color
  2. On a grey2 background color section, prefer white as panel background color
Text colors
  • The title color can only be purple or black.
  • Refer to the text colors article for the text colors to use on the content part.

Dark theme

Background color

All available background colors can be used as panel background color but here are the recommendations:

  1. On a black background color section, prefer a light opacity of white as panel background color
  2. On a purple background color section, prefer white as panel background color
Text colors
  • The title color can only be white, purple or black depending of the panel background color.
  • Refer to the text colors article for the text colors to use on the content part.
last modified: 17/03/2022 12:25:04

Default panel

A panel is a block element taking full width of its container.

Default panel are using Zurb Foundation panel class. Background color is by default white.

Default panel

Big panel

Panel can have a bigger padding by using rslib rs-panel-big class instead of Zurb Foundation panel class. It has no default color.

Big panel


Resizing panels with flexbox (boxes only, not contents inside)

To align panels height on a same row, the first easiest way is to use flexbox as long as elements inside of the panels should not be aligned (otherwise a resizer withtout flexbox will be needed).
A <div class="rs-panel-flex-cell"> should be added inside of the <div class="rs-panel-flex"> . Flexbox gridding is of course required to work properly.

Big flex panel

To have a big flex panel, rs-panel-flex-cell-big should be used instead of rs-panel-flex-cell .

Background on flex panel

The background should be added on same div as rs-panel-flex-cell

Short Title

This is a flex panel with a small text

Long Title with a longer text than the other box

This is a flex panel with a longer text than the other box next to this one and going on more than one line.


Resizing panels and their contents

If you need to align panels height and their content a JavaScript solution exists. See Resizer documentation.

Short Title

This is a flex panel with a small text

Long Title with a longer text than the other box

This is a flex panel with a longer text than the other box next to this one and going on more than one line.


Panel with extended background parts (not available for flex panel)

  • To have a different background color only on the header part containing the panel title, rs-panel-header should be added directly to the heading (h2,h3,...) with the wished background color.
  • To have a different background color on any other part than header part of the panel, rs-panel-collapse should be added to the <div> containing the wished background color.

Panel Title

This is a small text

This is another small text on a different background color

This is another small text

Panel Title

This is a small text

This is another small text on a different background color

This is another small text


Panel with extended image

To have an image on a part of the panel, rs-panel-collapse-img should be added to a <div> containing the <img> .

Accessibility

alt attribute must be filled to the img which is not decorative.

image descritpion if image isn't decorative

Panel with top image

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

image descritpion if image isn't decorative

Big panel with top image

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Panel arrow

To have an arrow on the panel, add rs-pos-rel to the <div> with panel

Add a <span></span> with the next class inside the panel

  • Top left: rs-panel-arrow-tl
  • Top right: rs-panel-arrow-tr
  • Right top: rs-panel-arrow-rt
  • Right bottom: rs-panel-arrow-rb
  • Bottom right: rs-panel-arrow-br
  • Bottom left: rs-panel-arrow-bl
  • Left bottom: rs-panel-arrow-lb
  • Left top: rs-panel-arrow-lt

lacinia sit amet. Curabitur sed hendrerit quam. Vestibulum ante ipsum

lacinia sit amet. Curabitur sed hendrerit quam. Vestibulum ante ipsum

lacinia sit amet. Curabitur sed hendrerit quam. Vestibulum ante ipsum

lacinia sit amet. Curabitur sed hendrerit quam. Vestibulum ante ipsum

lacinia sit amet. Curabitur sed hendrerit quam. Vestibulum ante ipsum

lacinia sit amet. Curabitur sed hendrerit quam. Vestibulum ante ipsum

lacinia sit amet. Curabitur sed hendrerit quam. Vestibulum ante ipsum

lacinia sit amet. Curabitur sed hendrerit quam. Vestibulum ante ipsum


Panel clickable

To have a panel full clickable, jsrs-clickable and rs-panel-clickable should be added to the <div> containing the panel . Always put at least one <a> in the panel .

Accessibility
  • Make sure <a></a> contains an explicit text and an href to make people understand what's the content of the link and where they go if they click on it.

Panel clickable with arrow

In order to highlight the "link" side of this element, it is possible to add an arrow whose style is similar to the "entrypoint". For that adapt your gridding and use a span with the class rs-panel-clickable-arrow .

Accessibility

Make sure <span> has a aria-hidden attribute set to true.

Panel clickable with target blank

If the link opens in a new tab, then this should be indicated to the user from a visual and screen reader point of view. The arrow therefore becomes rs-panel-clickable-arrow-blank or rs-panel-clickable-arrow-blank-neg .

Accessibility

A <span> with show-for-sr needs to be added inside your <a> with the mention New window.

Panel clickable with button

Clickable panel with button

Order

Clickable panel with button

Order

Panel clickable with image zoom on hover

Accessibility

alt attribute must be filled to the img who is not decorative.

image description if image isn't decorative

lacinia sit amet. Curabitur
lacinia sit amet. Curabitur sed hendrerit quam. Vestibulum ante ipsum


Expandable panel (with big spacings inside)

Accessibility
  • data-expand-panel on the button must call up the id of the content that will be displayed
  • aria-expanded attribute must be applied to the button that controls the foldout panel.
  • aria-controls attribute creates a cause and effect relationship. It identifies the element(s) that are controlled by the current element
  • aria-labelledby artribute is used to indicate the IDs of the elements that label the object. It is used to establish a relationship between the components. You must therefore link the content with the button by adding its id.

Add class='hide' to the content to display and choose a background color.
As in this example below, rs-bg-grey2 is optionnal. Any background class could be added.

Title

content

Content here link.

Expand panel negatif

To switch Expand panel to a darker one, add rs-panel-expand-neg to element with rs-panel-expand and rs-panel-expand-btn-neg to button .

To have the negative version of the content to display, you have to add data-expand-panel-dark to button and a dark color like rs-bg-purple to the content to display.

Title

content

Content here


Expandable standard panel

Add rs-panel-expand-slim to have an expandable panel with standard spacings.

Title

content

Content here link.


Expand panel fully clickable

Add jsrs-clickable to have all the panel clickable. Pay attention that if you have a link, it has the priority.

Title

content

Content here link.


Theming

Pickx

Expand panel

To switch Expand panel to Pickx version, add rs-bg-pickx rs-panel-expand-neg rs-panel-expand-slim to element with rs-panel-expand and rs-panel-expand-btn-pickx rs-panel-expand-btn-neg to button .

The content to display is the negative version. Here we use rs-bg-pickx class color on it. Don't forget to add data-expand-panel-dark to button .

Title

content

Content here