Modal

The Modal component could be used as fullscreen — captures all existing screen real estate or framed — content is fitted inside a floating window.

Styles

Framed

Use the Framed modal if a simple dialog is needed, or a fullscreen modal feels too invasive. Instead of stretching, framed modal height is dependent on its content. If screen size gets too small, the modal becomes scrollable. The Framed modal uses a Lifted Shadow property, which can be found in Shadow.

Construction
Container

The Modal is made of a Card component which wraps all the elements placed inside of it. The Modal has a maximum width of 90 units and minimum 4 unit margins to screen sides.

Usually, this part consists of a navigation but if necessary other components could be added. Also, the header could be used with an overlay parameter. In that case it overlays the content and can be used with a transparent mode.

Content

In most cases it includes a landscape image, a heading, an x-large spacer and a body but could include any kind of elements like carousels, icons, other cells, typography elements, buttons, links and so on.

Usually, the footer contains main modal actions but if necessary, other components could be added as well.

TODO: More strict rules about framed vs. fullscreen modals needed.

3 Sample image
Quick tip!
The quick brown fox jumps over the lazy dog while packing my box with five dozen liquor jugs.
Continue
Cancel
Quick tip!
The quick brown fox jumps over the lazy dog while packing my box with five dozen liquor jugs.
Got It
3 Sample image
The quick brown fox jumps over the lazy dog while packing.
Continue
The quick brown fox jumps over the lazy dog while packing my box with five dozen liquor jugs.
Update Now
Cancel

Pseudo code:

<modal style="framed">
  <modal-image>
    <image scaling="cover" ratio="widescreen" />
  </modal-image>
  <modal-content>
    <modal-title/>
    <modal-body/>
  </modal-content>
  <modal-actions>
    <button style="filled" />
    <button style="flat" />
  </modal-actions>
</modal>

Fullscreen (outdated)

Fullscreen modal fits to the whole screen and distributes elements over all area. Image and Buttons are placed to the top and bottom of modal. Inline elements captures the rest and positions it’s elements to vertical center. If screen is too small, modal becomes scrollable.

3 Sample image
Your modal title
Sed posuere consectetur lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet morbi leo risus.
Update Now
Cancel
Your modal title
Sed posuere consectetur lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Continue
3 Sample image
Lorem ipsum dolor sit amet, consectetur adipiscing
Got It

Pseudo code:

<modal>
  <modal-image>
    <image scaling="cover" ratio="square" />
  </modal-image>
  <modal-content>
    <modal-title/>
    <modal-body/>
  </modal-content>
  <modal-actions>
    <button style="filled" />
    <button style="flat" />
  </modal-actions>
</modal>

Cover (outdated)

Cover is used in Introduction Screens such as Video Introduction. It’s image covers whole background and content is kept above the image itself. It uses Inverse button as primary action and Muted Flat button as secondary one.

2 Sample image
Quick tip!
The quick brown fox jumps over the lazy dog while packing my box with five dozen liquor jugs.
Continue
Cancel

Inverse

Inverse style is used mostly in Onboarding and several other occasions. It’s background and colors are inverted. It uses Inverse button as primary action and Inverse Muted button as secondary one.

3 Sample image
Quick tip!
The quick brown fox jumps over the lazy dog while packing my box with five dozen liquor jugs.
Continue
Cancel

Specifications

// Base

$modal-background-color:          rgba(palette(cg1), 0.48);
$modal-content-background-color:  palette(cg9);
$modal-radius:                    radius(large);
$modal-lift:                      1000; // TODO: use global z-index system
$modal-default-height:            100%;
$modal-default-width:             100%;
$framed-modal-max-width:          400px;
$framed-modal-max-height:         100%;

// Spacing

$modal-small-padding:             unit(4);
$modal-large-padding:             unit(8);
$spacing-between-buttons:         unit(3);

// Text

$modal-title-text-type:           'heading';
$modal-title-centered:            true;
$modal-body-text-type:            'body';
$modal-inverse-text-theme:        'inverse';

// Inverse

$modal-inverse-background-color:  palette(cp1);

API

name type default
style fullscreen / framed / cover fullscreen
inverse false / true false