Panel

Overview

Panels are based on the gridding and can contain text, images and other components. As panels have no content default defined, the panel component usage guidance is purposefully high-level. It focuses specifically on the panel itself, not the structure of the information or interactive elements that the panel contains.

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.

1. Default panel
   
2. Big panel
   With bigger gutters

Functionalities

Panel can be extended with several functionalities:

• Non-clickable
  A simple default panel to enclose your content.
• Clickable
  This option allows your panels to be fully clickable, working as navigational element to drive user to another page.
• Expandable
  Expandable panel is used to hide/show larger amount of content.
• Selectable
  Selectable panel are called selectable boxes and allow the user to select unique or multiple options. More info about selectable boxes

These variations of panels are flexible enough to support a variety of different use cases.

Non-clickable

A panel can contain many different components, but the most common are headings, texts, prices, lists,... A panel can also include one or more links. If the panel contains several links, then you can interact with each link separately and the panel stay non-clickable, but if the panel contains only one link then the whole panel is clickable to that destination, see the clickable panel.

Clickable

Clickable panel 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.

The single link can be visible by using a clickable element as a button or a default link, but you have also the possibility to add a link to your panel without a clickable element.

States

The hover effect is applied following this rule:

1. Containing a clickable element
   The full panel is clickable, and the hover effect is applied on the clickable element (button, link,...) only.
2. Without a clickable element
   The full panel is clickable, and an hover effect is applied on the panel itself: the panel move to the top of 10px

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

1. Default state
   
2. Hover
   
3. Opened
   State visible when clicked. The panel expand opens, allowing the content inside to be displayed. Only one panel can be expand at a time. If a new expand is opened, the previous one is closed.

Anatomy

1. Panel container
   Container background can be customized whether by choosing a color, a gradient or an image.
2. Panel title
   Title give some context about the panel itself, depending on the use of the panel, the title is an optional content. It can be combined with an image or an icon. Though its size and place is always the same.
3. Panel content
4. Expand action panel
   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
   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. Expanded panel content
7. Close button
   Closes the expanded panel 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 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.