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.
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.
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.). Two options are available: classic and full-width.
Panel has 3 options:
Classic
Expandable
Scrollable
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.
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.
Content
Tab labels should follow our content guidelines.
Labels must be as concise and precise, with no more than 2 words.
Last updated
