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
<div class="center-modal is-confirmation">
<i class="sg-icon sg-icon-x"></i>
<h2>Are you sure you want to delete these workflows?</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec augue eu lacus aliquam lobortis</p>
<div class="conf-alert-actions">
<div class="btn-list">
<button class="btn btn-secondary">No</button>
<button class="btn btn-primary">Yes</button>
</div>
</div>
</div>
<div class="modal-mask"></div>

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

Required .side-modal
HTML Elements div.side-modal-mask
<div class="side-modal">
<h2>Side Modal Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="side-modal-mask"></div>
view raw modal-side.html hosted with ❤ by GitHub

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
<div class="center-modal">
<i class="sg-icon sg-icon-x"></i>
<h2>Center Modal Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="modal-mask"></div>

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

Container(s) .modal-fullscreen
Required .flex-header .modal-content
Optional Elements .modal-header .modal-header-details
Modifiers .modal-content.has-padding
<div class="modal-fullscreen">
<header class="flex-header">
<div>
<a class="flex-header-action modal-close">
<i class="sg-icon sg-icon-x"></i>
</a>
<div class="flex-header-title">
<h3>Fullscreen Modal</h3>
</div>
</div>
</header>
<div class="modal-content has-padding">
<div class="row modal-header">
<div class="col-8">
<h2>Title Goes Here.</h2>
</div>
<div class="col-4 modal-header-details">
<p class="small">You haven't tested this email yet.</p>
</div>
</div>
<div class="row">
...
</div>
</div>
</div>

Large

Import Custom Drag & Drop HTML

Required .center-modal .is-large .has-padding
HTML Elements div.modal-mask
<div class="center-modal is-large has-padding">
<h2>Import Custom Drag &amp; Drop HTML</h2>
<div class="modal-inner-scroll">
<div class="example-code-editor"></div>
<div class="modal-footer">
<div class="btn-list">
<button class="btn btn-small btn-secondary">Secondary</button>
<button class="btn btn-small btn-primary">Primary</button>
</div>
</div>
</div>
</div>
<div class="modal-mask"></div>

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
<div class="center-modal is-large">
<i class="modal-close sg-icon sg-icon-x"></i>
<ul class="tab-wrapper">
<li class="tab is-active">Image Library</li>
<li class="tab">Image Details</li>
</ul>
<div class="alert alert-warning">
<p><i class="sg-icon sg-icon-warning"></i>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. In nec augue eu lacus aliquam lobortis.<i class="sg-icon sg-icon-x"></i></p>
</div>
<div class="tab-panel is-visible" id="image-library">
...
</div>
<div class="tab-panel" id="image-details">
...
</div>
</div>
<div class="modal-mask"></div>