Ecco System
0.3.0
0.3.0
  • Please read this first!
  • Concept foundation
  • Tokens
    • Colors
    • Typography
    • Spacing
    • Border radius
    • Grid
  • Components
    • Buttons
    • Form elements
      • Checkbox
      • Checkbox Toggle
      • Date picker
      • Dropdown
      • File Selector
      • Radio button
      • Slider
      • Text fields
    • Lists
      • Tables
    • Menus
      • Global navigation
      • Tabs
      • Tree
    • Modal
    • Pagination
    • Toast and Status Bar
    • Tool tip
  • Templates
    • Web desktop templates
    • Larger mobile templates
    • Smaller mobile templates
Powered by GitBook
On this page
  • Anatomy
  • Attention
  • Usage examples

Was this helpful?

  1. Components

Modal

Messages associated with one or more tasks that may require one or more choices for users.

PreviousTreeNextPagination

Last updated 4 years ago

Was this helpful?

Anatomy

The Mobile version is a little bit skinner:

The modal appears over the entire screen content in a black shadow of 50% as shown below:

In some cases, it is possible to make a solution in which the modal content is more complex, requiring other user tasks, as in the example below:

Or even a complex information that users must confirm before next action.

Attention

The mobile version has some special rules that must be followed: place the modal with a maximum height of 80% of the height of the screen.

If more content is needed, roll vertically.

Usage examples

Modal | Anatomy
Modal mobile | Anatomy
Margin
Scroll