Components

Modals

sketch:Readyscss:Readyfigma:Ready
Usage
Code
Accessibility

Import

Import the settings, the modal, the bodys, and the button scss files.

Note that you can also implement in addition the scss file of the links if you use this component in your modals.

@import 'settings-tools/_all-settings';


@include import-font-families();


@import 'typography/_t.bodys';
@import 'components/_c.modal';
@import 'components/_c.button';

Usage

A modal is composed of several zones:

  • A header with the class : mc-modal__header
  • A body with class: mc-modal__body
  • A footer with class: mc-modal__footer

These areas are then encompassed in:

  • A specific container with the class: mc-modal__dialog
  • A global wrapper with the class: mc-modal
<div class="example">
  <div
    class="mc-modal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="modalTitle"
    aria-hidden="true"
  >
    <div class="mc-modal__dialog" role="document">
      <div class="mc-modal__header">
        <h2 class="mc-modal__title" id="modalTitle">Modal Title</h2>
        <button class="mc-modal__close" type="button">
          <span class="mc-modal__close-text">Close</span>
        </button>
      </div>
      <div class="mc-modal__body">
        <article class="mc-modal__content">
          <h3 class="mc-modal__heading">Title</h3>
          <p class="mt-body-m">Content paragraph</p>
        </article>
      </div>
      <div class="mc-modal__footer">
        <button type="button" class="mc-button">
          <span class="mc-button__label">Button label</span>
        </button>
      </div>
    </div>
  </div>
</div>

Detail of areas

In more detail, it should be noted that each of the fields mentioned above may contain other elements. Thus:

The header

The header contains:

  • the title of the modal (.mc-modal__title)
  • as well as its close button (.mc-modal__close)

These elements are mandatory and must always be present in your modal code.

The body

The body can contain:

  • a heading (.mc-modal__heading)
  • as well as paragraph elements (.mt-body-m)

Note that the heading is an optional element

The footer is the area that allows you to insert call-to-actions. This zone must always be present in your modals, and can contain one or more elements. See details about the footer.

Note that call to actions always take 100% of the modal's width on breakpoint-s.

Viewport: px 
<div class="example">
  <div
    class="mc-modal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="modalTitle"
    aria-hidden="true"
  >
    <div class="mc-modal__dialog" role="document">
      <div class="mc-modal__header">
        <h2 class="mc-modal__title" id="modalTitle">Modal Title</h2>
        <button class="mc-modal__close" type="button">
          <span class="mc-modal__close-text">Close</span>
        </button>
      </div>
      <div class="mc-modal__body">
        <article class="mc-modal__content">
          <h3 class="mc-modal__heading">Title</h3>
          <p class="mt-body-m">Content paragraph</p>
        </article>
      </div>
      <div class="mc-modal__footer">
        <button type="button" class="mc-button">
          <span class="mc-button__label">Button label</span>
        </button>
      </div>
    </div>
  </div>
</div>

Variations

Without heading

In cases where it is not necessary, you can use a modal without heading, as follows:

Viewport: px 
<div class="example">
  <div
    class="mc-modal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="modalTitle"
    aria-hidden="true"
  >
    <div class="mc-modal__dialog" role="document">
      <div class="mc-modal__header">
        <h2 class="mc-modal__title" id="modalTitle">Modal Title</h2>
        <button class="mc-modal__close" type="button">
          <span class="mc-modal__close-text">Close</span>
        </button>
      </div>
      <div class="mc-modal__body">
        <article class="mc-modal__content">
          <p class="mt-body-m">Content paragraph</p>
        </article>
      </div>
      <div class="mc-modal__footer">
        <button type="button" class="mc-button">
          <span class="mc-button__label">Button label</span>
        </button>
      </div>
    </div>
  </div>
</div>

Scrolling long content

In some cases, the content paragraph can be bigger than the modal's viewport. A dropped shadow on the top of the footer is used to indicate to the user that this is a scrollable content. Add the mc-modal--overflow modifier to the global wrapper (mc-modal).

Viewport: px 
<div class="example">
  <div
    class="mc-modal mc-modal--overflow"
    tabindex="-1"
    role="dialog"
    aria-labelledby="modalTitle"
    aria-hidden="true"
  >
    <div class="mc-modal__dialog" role="document">
      <div class="mc-modal__header">
        <h2 class="mc-modal__title" id="modalTitle">Modal Title</h2>
        <button class="mc-modal__close" type="button">
          <span class="mc-modal__close-text">Close</span>
        </button>
      </div>
      <div class="mc-modal__body">
        <article class="mc-modal__content">
          <h3 class="mc-modal__heading">Title</h3>
          <p class="mt-body-m">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores,
            aliquid! Illo quam, est nostrum eos ad dignissimos ullam omnis,
            impedit fugiat necessitatibus dolores odit, earum distinctio magni
            amet inventore suscipit.
          </p>
          <p class="mt-body-m">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores,
            aliquid! Illo quam, est nostrum eos ad dignissimos ullam omnis,
            impedit fugiat necessitatibus dolores odit, earum distinctio magni
            amet inventore suscipit.
          </p>
          <p class="mt-body-m">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores,
            aliquid! Illo quam, est nostrum eos ad dignissimos ullam omnis,
            impedit fugiat necessitatibus dolores odit, earum distinctio magni
            amet inventore suscipit.
          </p>
          <p class="mt-body-m">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores,
            aliquid! Illo quam, est nostrum eos ad dignissimos ullam omnis,
            impedit fugiat necessitatibus dolores odit, earum distinctio magni
            amet inventore suscipit.
          </p>
          <p class="mt-body-m">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores,
            aliquid! Illo quam, est nostrum eos ad dignissimos ullam omnis,
            impedit fugiat necessitatibus dolores odit, earum distinctio magni
            amet inventore suscipit.
          </p>
          <p class="mt-body-m">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores,
            aliquid! Illo quam, est nostrum eos ad dignissimos ullam omnis,
            impedit fugiat necessitatibus dolores odit, earum distinctio magni
            amet inventore suscipit.
          </p>
          <p class="mt-body-m">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores,
            aliquid! Illo quam, est nostrum eos ad dignissimos ullam omnis,
            impedit fugiat necessitatibus dolores odit, earum distinctio magni
            amet inventore suscipit.
          </p>
          <p class="mt-body-m">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores,
            aliquid! Illo quam, est nostrum eos ad dignissimos ullam omnis,
            impedit fugiat necessitatibus dolores odit, earum distinctio magni
            amet inventore suscipit.
          </p>
        </article>
      </div>
      <div class="mc-modal__footer">
        <button type="button" class="mc-button">
          <span class="mc-button__label">Button label</span>
        </button>
      </div>
    </div>
  </div>
</div>

Footer - two call to actions

A primary call to action button accompanied with a secondary button to give the user an alternative choice.

Viewport: px 
<div class="example">
  <div
    class="mc-modal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="modalTitle"
    aria-hidden="true"
  >
    <div class="mc-modal__dialog" role="document">
      <div class="mc-modal__header">
        <h2 class="mc-modal__title" id="modalTitle">Modal Title</h2>
        <button class="mc-modal__close" type="button">
          <span class="mc-modal__close-text">Close</span>
        </button>
      </div>
      <div class="mc-modal__body">
        <article class="mc-modal__content">
          <h3 class="mc-modal__heading">Title</h3>
          <p class="mt-body-m">Content paragraph</p>
        </article>
      </div>
      <div class="mc-modal__footer">
        <button type="button" class="mc-button">
          <span class="mc-button__label">Button label</span>
        </button>
        <button type="button" class="mc-button mc-button--bordered">
          <span class="mc-button__label">Button label</span>
        </button>
      </div>
    </div>
  </div>
</div>

Footer - call to action and link

A primary call to action button with a link to redirect the user to a page to give more informations.

Viewport: px 
<div class="example">
  <div
    class="mc-modal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="modalTitle"
    aria-hidden="true"
  >
    <div class="mc-modal__dialog" role="document">
      <div class="mc-modal__header">
        <h2 class="mc-modal__title" id="modalTitle">Modal Title</h2>
        <button class="mc-modal__close" type="button">
          <span class="mc-modal__close-text">Close</span>
        </button>
      </div>
      <div class="mc-modal__body">
        <article class="mc-modal__content">
          <h3 class="mc-modal__heading">Title</h3>
          <p class="mt-body-m">Content paragraph</p>
        </article>
      </div>
      <div class="mc-modal__footer">
        <button type="button" class="mc-button">
          <span class="mc-button__label">Button label</span>
        </button>
        <a href="#" class="mc-link">Default link</a>
      </div>
    </div>
  </div>
</div>

Behaviour

Max-width

Modals are responsive elements, therefore with a variable width depending on the screen resolution. Thus the width of a modal varies as follows:

BreakpointModal width
S100%
M38,5mu (616px)
L48mu (768px)
XL50mu (800px)
XXL56,5mu (904px)

Max-height

Just as the width of a modal varies according to the rules indicated above, the height of the modal also has max-height rules of variation:

BreakpointModal max-height
S100% (16px margin-top and bottom)
M1:2 screen
L2:3 screen
XL2:3 screen
XXL1:2 screen

On opening

During the opening of a modal by Javascript, several events occur:

  • Added the mc-modal-open class to the body to prevent the default scrolling of the browser window.
  • A mc-modal-overlay element is generated in the DOM.
Viewport: px 
<div class="example">
  <div
    class="mc-modal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="modalTitle"
    aria-hidden="true"
  >
    <div class="mc-modal__dialog" role="document">
      <div class="mc-modal__header">
        <h2 class="mc-modal__title" id="modalTitle">Modal Title</h2>
        <button class="mc-modal__close" type="button">
          <span class="mc-modal__close-text">Close</span>
        </button>
      </div>
      <div class="mc-modal__body">
        <article class="mc-modal__content">
          <h3 class="mc-modal__heading">Title</h3>
          <p class="mt-body-m">Content paragraph</p>
        </article>
      </div>
      <div class="mc-modal__footer">
        <button type="button" class="mc-button">
          <span class="mc-button__label">Button label</span>
        </button>
      </div>
    </div>
  </div>
  <div class="mc-modal-overlay" tabindex="-1" role="dialog"></div>
</div>