Panel

The key component to structure content on Mirakl.

Overview

To make sure all designers on all projects build views consistently, it is important that we use Roma layout components. By doing so, we ensure the consistency, sustainability, and scalability of our designs, and we facilitate the onboarding of new designers into the team.

Panels can be composed of the following components that can only be children of the main panel.

• Panel Header

• Panel Content

• Panel Link

• Panel Separator

• Panel Tabs

• Panel Footer

You cannot nest these elements inside each other; if you want a panel separator, you have to place it within the main panel, not the panel content component.

Guidelines

Panel header

As its name states, Panel Header is the first element that appears within the panel structure. It is not mandatory but highly recommended. As an example, if the Page Title is clear enough, you may remove it.

For accessibility reasons, if there is no Panel Header in the Panel, you should specify an <aria-label>(to be added in the code). It will not be visible in the interface but it will help screen readers to read the page while reassuring users who are navigating it.

Panel Header has several options, such as Button group, Background Icon, and Badges (2 maximum).

Panel content

Panel Content is used to contain anything that has to go inside a panel (text, image, datatable, datalist, etc.).

Panel has 3 options:

• Classic

• Expandable : its content is hidden until user triggers it to reveal content.

• Scrollable : user can navigate content by scrolling it

Expandable

This layout helps declutter a page and hide information that might not be useful at first to users. You can choose to expand or collapse it by default.

Scrollable

This layout allows putting long-form content within a panel in which the user can scroll. You can define a max height.

All elements contained within a panel are separated by a 16px margin in all directions, as follows:

Panel link

Panel link creates a vertical visual narrative between different panel elements. You may also add text within the link.

Panel separator

Panel Separator can help you structure your panel visually and make a difference between 2 panel content components. It is never mandatory.

Two options are available: classic and full-width. You may also add text within the separator.

Panel footer

Panel footer is really useful when you wish to display a fixed element after a Panel Content, especially a scrollable one.