Modals

Modals allow the user to maintain the context of a particular task. They can contain critical information or require important decisions. Sometimes it can make sense to put additional content from a table row in a modal instead of a page to avoid disrupting the users' flow.

Modals should be dismissable by clicking an X-icon, any place outside a modal or by pressing “Esc” on the keyboard.

Sidebar navigation

Modal title

 
 
 
 

 
 
General CSS for Overlays (modals)

.mask {
  background: rgba(40,55,74,.85);
  display:flex;
}
.overlay {
  margin:auto;
  padding:0;
  box-shadow: 0 31px 41px 0 rgba(33, 43, 54, .20), 0 2px 16px 0 rgba(33, 43, 54, .08);
}

An example of the tipical overlay

Sidebar navigation

Overlay title

Example of the overlay text. This text can be a bit longer and contain several sentences. They may even stretch for a couple of lines, if needed.
 

Input label

In-card modal

This type of modal is used for upgrade messages or status messages within certain part of the report. Underlying report is hidden and shows only a preview. If needed, some values are obfuscated and represented as blocks of color.

There’s not enough keywords for the Score to be calculated. Our bot is working hard on it – grab a coffee, you will see it in a couple of hours!

 
General CSS for in-card modals

.modal {
  margin:auto;
  max-width: 400px;
  height: auto;
  min-height:0;
  border-radius: 3px;
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.08), 0 15px 35px 0 rgba(39, 53, 89, 0.1), 0 0 0 1px rgba(114, 128, 142, 0.1);
  background-color: #ffffff;
  padding: 1em 2em 2em;
}
.modal .feather {
  width: 24px;
  height: 24px;
  stroke: #0292d2;
  stroke-width: 2;
}
.white_mask {
  background: rgba(255,255,255,.3);
  display:flex;
}

Examples:

modal1

modal2