diff --git a/packages/components/src/components/modal/_modal.scss b/packages/components/src/components/modal/_modal.scss
index 1ff401eeff69..23fc11dcc331 100644
--- a/packages/components/src/components/modal/_modal.scss
+++ b/packages/components/src/components/modal/_modal.scss
@@ -71,8 +71,9 @@
 
   .#{$prefix}--modal-container {
     position: relative;
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    grid-template-columns: auto;
     background-color: $ui-01;
     width: 100%;
     height: 100%;
@@ -83,31 +84,98 @@
     transition: transform $duration--moderate-02 motion(exit, expressive);
 
     @include carbon--breakpoint(md) {
-      width: 50%;
+      width: 84%;
       max-width: 768px;
       max-height: 90%;
       height: auto;
     }
 
     @include carbon--breakpoint(lg) {
-      max-height: 80%;
+      width: 60%;
+      max-height: 84%;
+    }
+
+    @include carbon--breakpoint(xlg) {
+      width: 48%;
+    }
+  }
+
+  .#{$prefix}--modal-container--xs {
+    @include carbon--breakpoint(md) {
+      width: 48%;
+    }
+
+    @include carbon--breakpoint(lg) {
+      width: 32%;
+      max-height: 48%;
+    }
+
+    @include carbon--breakpoint(xlg) {
+      width: 24%;
+
+      .#{$prefix}--modal-header,
+      .#{$prefix}--modal-content,
+      .#{$prefix}--modal-content__regular-content {
+        padding-right: rem(16px);
+      }
+    }
+  }
+
+  .#{$prefix}--modal-container--sm {
+    @include carbon--breakpoint(md) {
+      width: 60%;
+    }
+
+    @include carbon--breakpoint(lg) {
+      width: 42%;
+      max-height: 72%;
+    }
+
+    @include carbon--breakpoint(xlg) {
+      width: 36%;
+    }
+  }
+
+  .#{$prefix}--modal-container--lg {
+    @include carbon--breakpoint(md) {
+      width: 96%;
+    }
+
+    @include carbon--breakpoint(lg) {
+      width: 84%;
+      max-height: 96%;
+    }
+
+    @include carbon--breakpoint(xlg) {
+      width: 72%;
     }
   }
 
   .#{$prefix}--modal-header,
   .#{$prefix}--modal-content {
-    padding-right: 25%;
     padding-left: 1rem;
   }
 
   .#{$prefix}--modal-header,
-  .#{$prefix}--modal-footer {
-    flex-shrink: 0;
+  .#{$prefix}--modal-content,
+  .#{$prefix}--modal-content__regular-content {
+    padding-right: 20%;
+  }
+
+  .#{$prefix}--modal-content--with-form {
+    padding-right: 1rem;
+
+    @include carbon--breakpoint(xlg) {
+      padding-right: 1rem; // Override for `.#{$prefix}--modal-content`
+    }
   }
 
   .#{$prefix}--modal-header {
     padding-top: 1rem;
     margin-bottom: $carbon--spacing-03;
+
+    grid-row: 1/1;
+    grid-column: 1/-1;
   }
 
   .#{$prefix}--modal-header__label {
@@ -126,6 +194,9 @@
   .#{$prefix}--modal-content {
     @include type-style('body-long-01');
 
+    grid-row: 2/-2;
+    grid-column: 1/-1;
+
     overflow-y: auto;
     margin-bottom: $carbon--spacing-08;
     color: $text-01;
@@ -140,8 +211,28 @@
     }
   }
 
-  .#{$prefix}--modal-content > * {
-    @include type-style('body-long-01');
+  .#{$prefix}--modal-content {
+    > * {
+      @include type-style('body-long-01');
+    }
+  }
+
+  .#{$prefix}--modal-content--overflow-indicator {
+    grid-row: 2/-2;
+    grid-column: 1/-1;
+    width: 100%;
+    height: rem(16px);
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: $carbon--spacing-08;
+    background-image: linear-gradient(to bottom, transparent, $ui-01);
+  }
+
+  .#{$prefix}--modal-content:focus
+    ~ .#{$prefix}--modal-content--overflow-indicator {
+    width: calc(100% - 4px);
+    margin: 0 2px 2px 2px;
   }
 
   .#{$prefix}--modal-footer {
@@ -150,6 +241,9 @@
     height: 4rem;
     background-color: $modal-footer-background-color;
 
+    grid-row: -1/-1;
+    grid-column: 1/-1;
+
     button.#{$prefix}--btn {
       max-width: none;
       flex: 1;
diff --git a/packages/components/src/components/modal/modal.config.js b/packages/components/src/components/modal/modal.config.js
index 9c786f23eb2a..fa65b84729d1 100644
--- a/packages/components/src/components/modal/modal.config.js
+++ b/packages/components/src/components/modal/modal.config.js
@@ -29,6 +29,45 @@ module.exports = {
         classCloseButton: `${prefix}--btn--secondary`,
       },
     },
+    {
+      name: 'xs',
+      label: 'Transactional Modal (XS)',
+      context: {
+        idSuffix: Math.random()
+          .toString(36)
+          .substr(2),
+        hasFooter: true,
+        classPrimaryButton: `${prefix}--btn--primary`,
+        classCloseButton: `${prefix}--btn--secondary`,
+        size: 'xs',
+      },
+    },
+    {
+      name: 'sm',
+      label: 'Transactional Modal (Small)',
+      context: {
+        idSuffix: Math.random()
+          .toString(36)
+          .substr(2),
+        hasFooter: true,
+        classPrimaryButton: `${prefix}--btn--primary`,
+        classCloseButton: `${prefix}--btn--secondary`,
+        size: 'sm',
+      },
+    },
+    {
+      name: 'lg',
+      label: 'Transactional Modal (Large)',
+      context: {
+        idSuffix: Math.random()
+          .toString(36)
+          .substr(2),
+        hasFooter: true,
+        classPrimaryButton: `${prefix}--btn--primary`,
+        classCloseButton: `${prefix}--btn--secondary`,
+        size: 'lg',
+      },
+    },
     {
       name: 'nofooter',
       label: 'Passive Modal',
@@ -42,6 +81,45 @@ module.exports = {
         classCloseButton: `${prefix}--btn--secondary`,
       },
     },
+    {
+      name: 'nofooter-xs',
+      label: 'Passive Modal (XS)',
+      context: {
+        idSuffix: Math.random()
+          .toString(36)
+          .substr(2),
+        hasFooter: false,
+        classPrimaryButton: `${prefix}--btn--primary`,
+        classCloseButton: `${prefix}--btn--secondary`,
+        size: 'xs',
+      },
+    },
+    {
+      name: 'nofooter-sm',
+      label: 'Passive Modal (Small)',
+      context: {
+        idSuffix: Math.random()
+          .toString(36)
+          .substr(2),
+        hasFooter: false,
+        classPrimaryButton: `${prefix}--btn--primary`,
+        classCloseButton: `${prefix}--btn--secondary`,
+        size: 'sm',
+      },
+    },
+    {
+      name: 'nofooter-lg',
+      label: 'Passive Modal (Large)',
+      context: {
+        idSuffix: Math.random()
+          .toString(36)
+          .substr(2),
+        hasFooter: false,
+        classPrimaryButton: `${prefix}--btn--primary`,
+        classCloseButton: `${prefix}--btn--secondary`,
+        size: 'lg',
+      },
+    },
     {
       name: 'danger',
       label: 'Danger Modal',
diff --git a/packages/components/src/components/modal/modal.hbs b/packages/components/src/components/modal/modal.hbs
index f253d3ea9f13..3e5d2b7630fc 100644
--- a/packages/components/src/components/modal/modal.hbs
+++ b/packages/components/src/components/modal/modal.hbs
@@ -10,7 +10,7 @@
 
 <div data-modal id="modal-{{idSuffix}}" class="{{@root.prefix}}--modal {{classModalSupplemental}}" role="dialog"
   aria-modal="true" aria-labelledby="modal-{{idSuffix}}-label" aria-describedby="modal-{{idSuffix}}-heading" tabindex="-1">
-  <div class="{{@root.prefix}}--modal-container">
+  <div class="{{@root.prefix}}--modal-container{{#if size}} {{@root.prefix}}--modal-container--{{size}}{{/if}}">
     <div class="{{@root.prefix}}--modal-header">
       <p class="{{@root.prefix}}--modal-header__label {{@root.prefix}}--type-delta" id="modal-{{idSuffix}}-label">Optional label</p>
       <p class="{{@root.prefix}}--modal-header__heading {{@root.prefix}}--type-beta" id="modal-{{idSuffix}}-heading">Modal heading</p>
@@ -20,7 +20,8 @@
     </div>
 
     <!-- Note: Modals with content that scrolls, at any viewport, requires `tabindex="0"` on the `bx--modal-content` element -->
-    <div class="{{@root.prefix}}--modal-content" {{#if hasScrollingContent}}tabindex="0"{{/if}}>
+
+    <div class="{{@root.prefix}}--modal-content{{#if hasInput}} {{@root.prefix}}--modal-content--with-form{{/if}}" {{#if hasScrollingContent}}tabindex="0"{{/if}}>
       {{#if hasInput}}
       <div class="{{@root.prefix}}--form-item">
         <label for="text-input-{{idSuffix}}" class="{{@root.prefix}}--label">Text Input label</label>
@@ -71,9 +72,10 @@
         tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla
         facilisi.
         Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum. </p>
-        {{/if}}
+      {{/if}}
       {{/if}}
     </div>
+    <div class="{{@root.prefix}}--modal-content--overflow-indicator"></div>
 
     {{#if hasFooter}}
     <div class="{{@root.prefix}}--modal-footer">
diff --git a/packages/react/src/components/ComposedModal/ComposedModal-story.js b/packages/react/src/components/ComposedModal/ComposedModal-story.js
index 036fe6469843..09924dcedcab 100644
--- a/packages/react/src/components/ComposedModal/ComposedModal-story.js
+++ b/packages/react/src/components/ComposedModal/ComposedModal-story.js
@@ -8,7 +8,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
+import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
 import ComposedModal, {
   ModalHeader,
   ModalBody,
@@ -19,6 +19,13 @@ import { settings } from 'carbon-components';
 
 const { prefix } = settings;
 
+const sizes = {
+  Default: '',
+  'Extra small (xs)': 'xs',
+  'Small (sm)': 'sm',
+  'Large (lg)': 'lg',
+};
+
 const props = {
   composedModal: (includeOpen = true) => ({
     open: includeOpen ? boolean('Open (open in <ComposedModal>)', true) : null,
@@ -28,6 +35,7 @@ const props = {
       'Primary focus element selector (selectorPrimaryFocus)',
       '[data-modal-primary-focus]'
     ),
+    size: select('Size (size)', sizes),
   }),
   modalHeader: () => ({
     label: text('Optional Label (label in <ModalHeader>)', 'Optional Label'),
@@ -60,18 +68,21 @@ storiesOf('ComposedModal', module)
   .addDecorator(withKnobs)
   .add(
     'Using Header / Footer Props',
-    () => (
-      <ComposedModal {...props.composedModal()}>
-        <ModalHeader {...props.modalHeader()} />
-        <ModalBody>
-          <p className={`${prefix}--modal-content__text}`}>
-            Please see ModalWrapper for more examples and demo of the
-            functionality.
-          </p>
-        </ModalBody>
-        <ModalFooter {...props.modalFooter()} />
-      </ComposedModal>
-    ),
+    () => {
+      const { size, ...rest } = props.composedModal();
+      return (
+        <ComposedModal {...rest} size={size || undefined}>
+          <ModalHeader {...props.modalHeader()} />
+          <ModalBody>
+            <p className={`${prefix}--modal-content__text}`}>
+              Please see ModalWrapper for more examples and demo of the
+              functionality.
+            </p>
+          </ModalBody>
+          <ModalFooter {...props.modalFooter()} />
+        </ComposedModal>
+      );
+    },
     {
       info: {
         text: `
@@ -86,25 +97,28 @@ storiesOf('ComposedModal', module)
   )
   .add(
     'Using child nodes',
-    () => (
-      <ComposedModal {...props.composedModal()}>
-        <ModalHeader {...props.modalHeader()}>
-          <h1>Testing</h1>
-        </ModalHeader>
-        <ModalBody>
-          <p>
-            Please see ModalWrapper for more examples and demo of the
-            functionality.
-          </p>
-        </ModalBody>
-        <ModalFooter>
-          <Button kind="secondary">Cancel</Button>
-          <Button kind={props.composedModal().danger ? 'danger' : 'primary'}>
-            Save
-          </Button>
-        </ModalFooter>
-      </ComposedModal>
-    ),
+    () => {
+      const { size, ...rest } = props.composedModal();
+      return (
+        <ComposedModal {...rest} size={size || undefined}>
+          <ModalHeader {...props.modalHeader()}>
+            <h1>Testing</h1>
+          </ModalHeader>
+          <ModalBody>
+            <p>
+              Please see ModalWrapper for more examples and demo of the
+              functionality.
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button kind="secondary">Cancel</Button>
+            <Button kind={props.composedModal().danger ? 'danger' : 'primary'}>
+              Save
+            </Button>
+          </ModalFooter>
+        </ComposedModal>
+      );
+    },
     {
       info: {
         text: `
@@ -121,14 +135,16 @@ storiesOf('ComposedModal', module)
         toggleModal = open => this.setState({ open });
         render() {
           const { open } = this.state;
+          const { size, ...rest } = props.composedModal();
           return (
             <>
               <Button onClick={() => this.toggleModal(true)}>
                 Launch composed modal
               </Button>
               <ComposedModal
-                {...props.composedModal()}
+                {...rest}
                 open={open}
+                size={size || undefined}
                 onClose={() => this.toggleModal(false)}>
                 <ModalHeader {...props.modalHeader()} />
                 <ModalBody>
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.js b/packages/react/src/components/ComposedModal/ComposedModal.js
index 44f4b3d84946..89a756551990 100644
--- a/packages/react/src/components/ComposedModal/ComposedModal.js
+++ b/packages/react/src/components/ComposedModal/ComposedModal.js
@@ -60,6 +60,11 @@ export default class ComposedModal extends Component {
      * focused when the Modal opens
      */
     selectorPrimaryFocus: PropTypes.string,
+
+    /**
+     * Specify the size variant.
+     */
+    size: PropTypes.oneOf('xs', 'sm', 'lg'),
   };
 
   static getDerivedStateFromProps({ open }, state) {
@@ -192,6 +197,7 @@ export default class ComposedModal extends Component {
       children,
       danger,
       selectorPrimaryFocus, // eslint-disable-line
+      size,
       ...other
     } = this.props;
 
@@ -204,6 +210,7 @@ export default class ComposedModal extends Component {
 
     const containerClass = classNames({
       [`${prefix}--modal-container`]: true,
+      [`${prefix}--modal-container--${size}`]: size,
       [containerClassName]: containerClassName,
     });
 
@@ -379,20 +386,30 @@ export class ModalBody extends Component {
      * Specify an optional className to be added to the Modal Body node
      */
     className: PropTypes.string,
+
+    /**
+     * Provide whether the modal content has a form element.
+     * If `true` is used here, non-form child content should have `bx--modal-content__regular-content` class.
+     */
+    hasForm: PropTypes.bool,
   };
 
   render() {
-    const { className, children, ...other } = this.props;
+    const { className, children, hasForm, ...other } = this.props;
 
     const contentClass = classNames({
       [`${prefix}--modal-content`]: true,
+      [`${prefix}--modal-content--with-form`]: hasForm,
       [className]: className,
     });
 
     return (
-      <div className={contentClass} {...other}>
-        {children}
-      </div>
+      <>
+        <div className={contentClass} {...other}>
+          {children}
+        </div>
+        <div className={`${prefix}--modal-content--overflow-indicator`} />
+      </>
     );
   }
 }
diff --git a/packages/react/src/components/Modal/Modal-story.js b/packages/react/src/components/Modal/Modal-story.js
index a6ab1f13eaca..d96993a396a0 100644
--- a/packages/react/src/components/Modal/Modal-story.js
+++ b/packages/react/src/components/Modal/Modal-story.js
@@ -9,13 +9,20 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
+import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
 import Modal from '../Modal';
 import TextInput from '../TextInput';
 import { settings } from 'carbon-components';
 
 const { prefix } = settings;
 
+const sizes = {
+  Default: '',
+  'Extra small (xs)': 'xs',
+  'Small (sm)': 'sm',
+  'Large (lg)': 'lg',
+};
+
 const props = () => ({
   className: 'some-class',
   open: boolean('Open (open)', true),
@@ -44,6 +51,7 @@ const props = () => ({
     'Primary focus element selector (selectorPrimaryFocus)',
     '[data-modal-primary-focus]'
   ),
+  size: select('Size (size)', sizes),
   iconDescription: text(
     'Close icon description (iconDescription)',
     'Close the modal'
@@ -60,14 +68,17 @@ storiesOf('Modal', module)
   .addDecorator(withKnobs)
   .add(
     'Default',
-    () => (
-      <Modal {...props()}>
-        <p className={`${prefix}--modal-content__text`}>
-          Please see ModalWrapper for more examples and demo of the
-          functionality.
-        </p>
-      </Modal>
-    ),
+    () => {
+      const { size, ...rest } = props();
+      return (
+        <Modal {...rest} size={size || undefined}>
+          <p className={`${prefix}--modal-content__text`}>
+            Please see ModalWrapper for more examples and demo of the
+            functionality.
+          </p>
+        </Modal>
+      );
+    },
     {
       info: {
         text: `
@@ -79,23 +90,30 @@ storiesOf('Modal', module)
   )
   .add(
     'Trap Focus',
-    () => (
-      <>
-        <Modal {...props()} selectorPrimaryFocus="#text-input-2">
-          <TextInput
-            id="text-input-1"
-            labelText="Text Input 1"
-            placeholder="Enter text..."
-            style={{ marginBottom: '1rem' }}
-          />
-          <TextInput
-            id="text-input-2"
-            labelText="Text Input 2"
-            placeholder="Enter text..."
-          />
-        </Modal>
-      </>
-    ),
+    () => {
+      const { size, ...rest } = props();
+      return (
+        <>
+          <Modal
+            {...rest}
+            hasForm
+            size={size || undefined}
+            selectorPrimaryFocus="#text-input-2">
+            <TextInput
+              id="text-input-1"
+              labelText="Text Input 1"
+              placeholder="Enter text..."
+              style={{ marginBottom: '1rem' }}
+            />
+            <TextInput
+              id="text-input-2"
+              labelText="Text Input 2"
+              placeholder="Enter text..."
+            />
+          </Modal>
+        </>
+      );
+    },
     {
       info: {
         text: `
diff --git a/packages/react/src/components/Modal/Modal.js b/packages/react/src/components/Modal/Modal.js
index b525b81976e6..803e340c885d 100644
--- a/packages/react/src/components/Modal/Modal.js
+++ b/packages/react/src/components/Modal/Modal.js
@@ -34,6 +34,12 @@ export default class Modal extends Component {
      */
     passiveModal: PropTypes.bool,
 
+    /**
+     * Provide whether the modal content has a form element.
+     * If `true` is used here, non-form child content should have `bx--modal-content__regular-content` class.
+     */
+    hasForm: PropTypes.bool,
+
     /**
      * Specify a handler for closing modal.
      * The handler should care of closing modal, e.g. changing `open` prop.
@@ -124,6 +130,11 @@ export default class Modal extends Component {
      */
     selectorPrimaryFocus: PropTypes.string,
 
+    /**
+     * Specify the size variant.
+     */
+    size: PropTypes.oneOf('xs', 'sm', 'lg'),
+
     /**
      * Specify whether the modal should use 3rd party `focus-trap-react` for the focus-wrap feature.
      * NOTE: by default this is true.
@@ -278,6 +289,7 @@ export default class Modal extends Component {
       modalLabel,
       modalAriaLabel,
       passiveModal,
+      hasForm,
       secondaryButtonText,
       primaryButtonText,
       open,
@@ -290,6 +302,7 @@ export default class Modal extends Component {
       selectorPrimaryFocus, // eslint-disable-line
       selectorsFloatingMenus, // eslint-disable-line
       shouldSubmitOnEnter, // eslint-disable-line
+      size,
       focusTrap,
       ...other
     } = this.props;
@@ -306,6 +319,14 @@ export default class Modal extends Component {
       [this.props.className]: this.props.className,
     });
 
+    const contaienrClasses = classNames(`${prefix}--modal-container`, {
+      [`${prefix}--modal-container--${size}`]: size,
+    });
+
+    const contentClasses = classNames(`${prefix}--modal-content`, {
+      [`${prefix}--modal-content--with-form`]: hasForm,
+    });
+
     const modalButton = (
       <button
         className={`${prefix}--modal-close`}
@@ -336,7 +357,7 @@ export default class Modal extends Component {
       <div
         ref={this.innerModal}
         role="dialog"
-        className={`${prefix}--modal-container`}
+        className={contaienrClasses}
         aria-label={
           modalLabel
             ? null
@@ -352,7 +373,8 @@ export default class Modal extends Component {
           <h3 className={`${prefix}--modal-header__heading`}>{modalHeading}</h3>
           {!passiveModal && modalButton}
         </div>
-        <div className={`${prefix}--modal-content`}>{this.props.children}</div>
+        <div className={contentClasses}>{this.props.children}</div>
+        <div className={`${prefix}--modal-content--overflow-indicator`} />
         {!passiveModal && (
           <div className={`${prefix}--modal-footer`}>
             <Button kind="secondary" onClick={onSecondaryButtonClick}>