Mirakl Design
Mirakl Design
  • Getting started
    • Welcome to Roma
      • Design principles
  • Design
    • Components
      • Actions
        • Action menu
        • Buttons
        • Button group
        • File download
        • Save bar
        • Tasklist
        • Contextual Toolbar
      • Datalist
      • Datatable
      • Feedback
        • Alerts
        • Activity Loader
        • Badge (status)
        • Empty state
        • Snackbar
      • Form
        • Fields
        • Pickers
        • Selection controls
        • Tree
      • Images
        • Illustrations
        • Icons
        • Media
      • Navigation
        • Hyperlink
        • Page title
        • Sidebar
        • Top bar
      • Overlays
        • Modal
        • Popover
        • Tooltip
        • Side Drawer
      • Structure
        • Global layout
        • Panel
          • Activable Panel
          • Clickable Panel
          • Expandable Panel
          • Panel tabs
          • Totalizer Panel
        • Card
    • Patterns
      • Advanced selection
      • Configure options
      • Displaying data
      • Displaying history
      • Errors
      • Forms
        • Form - Creation mode
        • Form - Edition mode
        • Form - In a modal
        • Error Management
        • Stepper form
        • Onboarding form
      • Loading
      • Progressive disclosure
  • content
    • Writing for Mirakl
      • Grammar and formatting
    • Vocabulary
      • Mirakl products
      • Which verb to use
Powered by GitBook
On this page
  • Overview
  • Guidelines
  • Panel header
  • Panel content
  • Panel link
  • Panel separator
  • Panel footer

Was this helpful?

  1. Design
  2. Components
  3. Structure

Panel

The key component to structure content on Mirakl.

Last updated 1 year ago

Was this helpful?

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

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 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

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.

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.

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 is clear enough, you may remove it.

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

Page Title
Button group
Badges
Panel Header
Panel Content
Panel Link
Panel Separator
Panel Tabs
Panel Footer