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

Was this helpful?

  1. Design
  2. Components
  3. Structure
  4. Panel

Totalizer Panel

A component to present important figures to the user.

Last updated 1 year ago

Was this helpful?

Overview

Totalizer panels are used to show and consolidate important figures for operators and sellers. It usually displays numbers that the user wants to access quickly in order to make informed decisions.

Totalizer panels are composed of a background icon and a title (mandatory) and can have a Link Button, a subtext, and a tooltip (optional). Each of them has its own loading strategy.

Guidelines

Totalizer panels must be used within a group of 2 minimum, either above the overall content or within a sidebar.

A totalizer panel cannot be used within another panel.

Be consistent in using totalizers: avoid mixing different Totalizer variants within the same Totalizer group

If data isn't available, display the totalizer card in red with a dash.

Content

The totalizer subtext should be written in noun form.

Use a to help users in making quick actions related to your totalizer content.

Totalizer panel content should follow our .

content guidelines
Link Button