Modal

Documentation is WIP, check open issues and start improving!

Modal component is used to interrupt user with unique screen and a possibility of returning to previous screen of the flow. By default, Modal is in frame mode and contains optional Image, Title, Body and two Buttons.

Image component in frame Modal is recommended to be displayed in 2:1 proportions.

Change Directions
Use direction change button to switch between two or more directions more easily.
Got it!
Cancel

Fullscreen

Fullscreen type of modal can be used in cases such as Onboarding or Registation.

Change Directions
Use direction change button to switch between two or more directions more easily.
Got it!
Cancel

Documentation

Specifications

// Base

$modal-color-background            : rgba(palette(cd1), 0.64);
$modal-color-content-background    : palette(cl1);

$modal-border-radius               : unit(2);                            // 8px
$modal-shadow-frame                : 0 2px 4px rgba(palette(cd1), 0.16);

$modal-height                      : 100%;
$modal-width                       : 100%;

$modal-padding-top-actions         : unit(6);                            // 24px
$modal-padding-content             : unit(6);                            // 24px

// Spacing

$modal-padding                     : unit(4);                            // 16px
$modal-padding-frame               : unit(9);                            // 36px

$spacing-between-buttons           : unit(2);                            // 8px
$spacing-between-body-title        : unit(2);                            // 8px

// Text

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

API

Name Values Default
image component nil
title string ’’
body string / component ’’
primary_button component nil
secondary_button component nil
style frame / fullscreen frame