# 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.

Container(s) | .sg-modal .conf-alert
States | .is-visible
HTML Elements | div.conf-alert-header div.conf-alert-body

#### 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.

Workflow Title

### Select a Starting Template

Blank
User Signs Up
User Cancels Subscription
Special Event

### Or choose from one of your existing workflows

Workflow
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

- 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 in non-standard locations.
Don't use page-level alerts.

# 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.

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