Modals

Modals are intended to inform users about specific tasks they need to complete to move forward through our product. Modals are intended to be separated from the parent application to avoid interrupting the workflow in the main window. Modals often contain critical information, require decisions by the user, or involve multiple tasks.

Confirmation

Are you sure you want to delete these workflows?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec augue eu lacus aliquam lobortis

Required .center-modal .is-confirmation
HTML Elements div.modal-mask

Guidelines

  • Title should be sentence case and ≤ 50 characters.
  • Body content should use complete sentences and be ≤ 200 characters.
  • Interrogative statements must have a question mark. Declarative statements may omit a period.
  • When a modal is open, body scrolling should be disabled using body.modal-open.
  • Action buttons should appear at the bottom. Place one primary button flush right and up to one secondary button to its left.
  • Clicking on the grey scrim should not close the modal.
Don't use vague actions.
Don't place in non-standard locations.

Side

Side Modal Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec augue eu lacus aliquam lobortis.

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks mortar solutions with functional solutions.

Select a Starting Template

Or choose from one of your existing workflows

Cancel Create
Required .side-modal
HTML Elements div.side-modal-mask

Guidelines

  • Headings should be title case and ≤ 30 characters.
  • Headings should be marked up as h2.is-size-h1.
  • When a modal is open, body scrolling should be disabled using body.modal-open.
  • Action buttons should appear at the bottom of the form. Place one primary button flush right and up to one secondary button to its left.
  • When alerts are needed, place them inline beneath the title. When an alert occurs, scroll the modal up so that the alert is visible.
  • Clicking on the grey scrim should close the modal.
Don't place action buttons in non-standard locations.
Don't use page-level alerts.

Center

Center Modal Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Required .center-modal
HTML Elements div.modal-mask

Guidelines

  • Heading should be title case and ≤ 30 characters.
  • Heading should be a h2 element.
  • When a modal is open, body scrolling should be disabled using body.modal-open.
  • Action buttons should appear at the bottom of the form. Place one primary button flush right and up to one secondary button to its left.
  • When alerts are needed, place them inline beneath the title. When an alert occurs, scroll the modal up so that the alert is visible.
  • Clicking on the grey scrim should close the modal.
Don't place in non-standard locations.
Don't use page-level alerts.

Fullscreen

Fullscreen Modal

Title Goes Here.

You haven't tested this email yet.

Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Container(s) .modal-fullscreen
Required .flex-header .modal-content
Optional Elements .modal-header .modal-header-details
Modifiers .modal-content.has-padding

Large

Import Custom Drag & Drop HTML

Required .center-modal .is-large .has-padding
HTML Elements div.modal-mask

Large Tabs

  • Image Library
  • Image Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec augue eu lacus aliquam lobortis.

Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Image title
Required .center-modal .is-large
HTML Elements div.modal-mask ul.tab-wrapper div.tab-panel
Optional Elements div.alert