MarketingModal

MarketingModal is similar to the alert modal, providing friendly messaging to our users to encourage greater engagement than the simpler confirmation dialogs. They should enable platform understanding, highlight opportunities, and support workflow engagement.

The MarketingModal is a preconfigured ModalDialog that accepts an image and center aligns buttons.

Basic Usage

() => {
  const [isOpen, open, close] = useToggle(false);
  return (
    <>
      <div className="d-flex">
        <Button variant="outline-primary" onClick={open}>Open marketing modal</Button>
      </div>
      <MarketingModal
        title="My dialog"
        isOpen={isOpen}
        onClose={close}
        heroIsDark
        heroNode={(
          <ModalDialog.Hero>
            <ModalDialog.Hero.Background
              backgroundSrc="https://picsum.photos/1600/800/"
            />
            <ModalDialog.Hero.Content style={{ maxWidth: '15rem' }}>
              <ModalDialog.Title as="h1">
                All kinds of things.
              </ModalDialog.Title>
            </ModalDialog.Hero.Content>
          </ModalDialog.Hero>
        )}
        footerNode={(
          <ActionRow isStacked>
            <Button variant="tertiary" onClick={close}>Cancel</Button>
            <Button>Submit</Button>
          </ActionRow>
        )}
      >
        <p>
          I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.
        </p>
      </MarketingModal>
    </>
  )
}

() => {
  const [isOpen, open, close] = useToggle(false);
  return (
    <>
      <div className="d-flex">
        <Button variant="outline-primary" onClick={open}>Open marketing modal</Button>
      </div>
      <MarketingModal
        title="My dialog"
        isOpen={isOpen}
        onClose={close}
        heroIsDark
        heroNode={(
          <ModalDialog.Hero>
            <ModalDialog.Hero.Background
              backgroundSrc="https://picsum.photos/1600/800/"
            />
            <ModalDialog.Hero.Content style={{ maxWidth: '15rem' }}>
              <ModalDialog.Title as="h1">
                All kinds of things.
              </ModalDialog.Title>
            </ModalDialog.Hero.Content>
          </ModalDialog.Hero>
        )}
        footerNode={(
          <ActionRow isStacked>
            <Button variant="tertiary" onClick={close}>Cancel</Button>
            <Button>Submit</Button>
          </ActionRow>
        )}
      >
        <p>
          I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.
        </p>
      </MarketingModal>
    </>
  )
}

Theme Variables (SCSS)#

$modal-inner-padding:                1.5rem !default;
$modal-inner-padding-bottom:         .7rem !default;
$modal-footer-margin-between:        .5rem !default;
$modal-dialog-margin:                1.5rem !default;
$modal-dialog-margin-y-sm-up:        1.75rem !default;
$modal-title-line-height:            $line-height-base !default;
$modal-content-color:                null !default;
$modal-content-bg:                   $white !default;
$modal-content-border-color:         rgba($black, .2) !default;
$modal-content-border-width:         0 !default;
$modal-content-border-radius:        $border-radius-lg !default;
$modal-content-inner-border-radius:  subtract($modal-content-border-radius, $modal-content-border-width) !default;
$modal-content-box-shadow-xs:        0 .25rem .5rem rgba($black, .5) !default;
$modal-content-box-shadow-sm-up:     0 10px 20px rgba($black, .15), 0 8px 20px rgba($black, .15) !default;
$modal-backdrop-bg:                  $black !default;
$modal-backdrop-opacity:             .5 !default;
$modal-header-border-color:          $border-color !default;
$modal-footer-border-color:          $modal-header-border-color !default;
$modal-header-border-width:          $modal-content-border-width !default;
$modal-footer-border-width:          $modal-header-border-width !default;
$modal-header-padding-y:             1rem !default;
$modal-header-padding-x:             1.5rem !default;
$modal-close-container-top:          .625rem !default;
$modal-header-padding:               $modal-header-padding-y $modal-header-padding-x !default;
$modal-footer-padding-y:             1rem !default;
$modal-footer-padding-x:             1.5rem !default;
$modal-footer-padding:               $modal-footer-padding-y $modal-footer-padding-x !default;
$modal-xl:                           1140px !default;
$modal-lg:                           800px !default;
$modal-md:                           500px !default;
$modal-sm:                           400px !default;
$modal-fade-transform:               translate(0, -50px) !default;
$modal-show-transform:               none !default;
$modal-transition:                   transform .3s ease-out !default;
$modal-scale-transform:              scale(1.02) !default;

MarketingModal Props API

children node Required
Specifies the content of the modal
title string Required
Title of the modal
isOpen bool
Is the modal dialog open or closed
Defaultfalse
isBlocking bool
Prevent clicking on the backdrop to close the modal
Defaultfalse
hasCloseButton bool
The close 'x' icon button in the top right corner
Defaulttrue
onClose requiredWhenNot(PropTypes.func, 'isBlocking')
Callback function for when the modal is dismissed
Default() => {}
size enum'sm' | 'md' | 'lg' | 'xl' | 'fullscreen'
Size of the modal window
Default'md'
closeLabel string
Specifies the aria-label attribute for the close button
Default'Close'
className string
Specifies class name to append to the base element
isFullscreenScroll bool
Determines where a scrollbar should appear if a modal is too large for the viewport. When false, the ModalDialog.Body receives a scrollbar, when true the browser window itself receives the scrollbar.
Defaulttrue
footerNode node
Specifies what should be displayed in the footer of the nodal
Defaultnull
heroIsDark bool
Enables dark theme for the modal
Defaulttrue
heroNode node
Specifies what should be displayed in the header of the modal
Defaultnull
beforeBodyNode node
Specifies what should be displayed before the body block
Defaultnull
afterBodyNode node
Specifies what should be displayed after the body block
Defaultnull

ModalDialog Props API

children node Required
Specifies the content of the dialog
title string Required
The aria-label of the dialog
onClose func Required
A callback to close the modal dialog
isOpen bool
Is the modal dialog open or closed
Defaultfalse
hasCloseButton bool
The close 'x' icon button in the top right of the dialog box
Defaulttrue
size enum'sm' | 'md' | 'lg' | 'xl' | 'fullscreen'
Sizes determine the maximum width of the dialog box
Default'md'
variant enum'default' | 'warning' | 'danger' | 'success' | 'dark'
The visual style of the dialog box
Default'default'
closeLabel string
The label supplied to the close icon button if one is rendered
Default'Close'
className string
Specifies class name to append to the base element
isFullscreenScroll bool
Determines where a scrollbar should appear if a modal is too large for the viewport. When false, the ModalDialog. Body receives a scrollbar, when true the browser window itself receives the scrollbar.
Defaultfalse
isFullscreenOnMobile bool
To show full screen view on mobile screens
Defaultfalse
isBlocking bool
Prevent clicking on the backdrop to close the modal
Defaultfalse
zIndex number

Paragon Design System

MarketingModal

Basic Usage

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

MarketingModal

Basic Usage#

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Basic Usage