Components

Modal

Modals communicate information via a secondary window and allow the user to maintain the context of a particular task. Use Modals sparingly because they interrupt user workflow.

Created with Sketch. Are you sure you want to delete this account? All data associated with this account will be lost, including all transactions. This can not be reversed. Modal Title Here Detail about the action taking place here. Next Submit Cancel
Created with Sketch. Are you sure you want to delete this account? All data associated with this account will be lost, including all transactions. This can not be reversed. Modal Title Here Detail about the action taking place here. Next Submit Cancel 1 2 2
  1. Header
    • Modal title
    • Dismiss "X" icon
    • Top border
    • Gray divider
  2. Body
    • Content title
    • Content description (optional)
  3. Footer
    • Gray divider
    • Primary button
    • Text button
Created with Sketch. Are you sure you want to delete this account? All data associated with this account will be lost, including all transactions. This can not be reversed. Modal Title Here Detail about the action taking place here. Next Submit Cancel 30px 20px 18px 720px 16px 20px 30px 24px 16px 20px 30px 40px 
.modal-title {
font-family: Lato-Regular;
font-size: 18px;
color: #002D41;
}

.top-border {
background-color: DEPENDS ON MODAL MESSAGE;
border-radius: 4px 4px 0 0;
}

gray-divider {
border: 2px solid #EEF1F6;
}

.modal-content-title {
font-family: Lato-Regular;
font-size: 24px;
color: #002D41;
}

.modal-content-description {
font-family: Lato-Regular;
font-size: 14px;
color: #3C4144;
}

Types

Modals include feedback colors so users can further understand what their purpose is. The four types are:

  • Informational (Blue)
  • Success (Green)
  • Warning (Yellow)
  • Danger (Red)

Overview of CSS Classes

Selector
Summary
Parent Selector

.modal-title

.top-border

.gray-divider

.modal-content-title

.modal-content-description