Mozaic

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';
@import 'typography/t.bodys';
@import 'components/c.divider';
@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">
      <header
        class="mc-modal__header mc-divider-bottom mc-divider-bottom--light"
      >
        <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>
      </header>
      <main class="mc-modal__body">
        <article class="mc-modal__content">
          <h3 class="mc-modal__heading">Title</h3>
          <div class="mc-modal__inner mt-body-m">
            <p>Content paragraph</p>
          </div>
        </article>
      </main>
      <footer class="mc-modal__footer">
        <button type="button" class="mc-button">
          <span class="mc-button__label">Button label</span>
        </button>
      </footer>
    </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 content area (.mc-modal__content)
a heading (.mc-modal__heading)
as well as an inner content where you can add paragraph elements (.mc-modal__inner.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.

Variations

Header with icon

As detailed above, you can add an icon in the header. You can do this in the following way:

Viewport: px

<div class="example">
  <div
    class="mc-modal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="modalTitle"
    aria-hidden="true"
  >
    <div class="mc-modal__dialog is-open" role="document">
      <header class="mc-modal__header">
        <svg class="mc-modal__icon">
          <use xlink:href="#icon" />
        </svg>
        <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>
      </header>
      <main class="mc-modal__body">
        <article class="mc-modal__content">
          <h3 class="mc-modal__heading">Title</h3>
          <div class="mc-modal__inner mt-body-m">
            <p>Content paragraph</p>
          </div>
        </article>
      </main>
      <footer class="mc-modal__footer">
        <button type="button" class="mc-button">
          <span class="mc-button__label">Button label</span>
        </button>
      </footer>
    </div>
  </div>
  <div class="mc-overlay is-visible" tabindex="-1" role="dialog"></div>
</div>


<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="icon" viewBox="0 0 24 24">
    <path
      d="M17.13 16.57H8a1 1 0 0 1-1-.74L4.39 6H3a1 1 0 0 1 0-2h2.15a1 1 0 0 1 1 .74l.53 2H20A1 1 0 0 1 20.94 8l-2.87 7.87a1 1 0 0 1-.94.7zm-8.34-2h7.64l2.14-5.87H7.2z"
    />
    <circle cx="9.46" cy="19.85" r="2.15" />
    <circle cx="15.69" cy="19.85" r="2.15" />
  </symbol>
</svg>

The width of the icon is 24px ($mu150)

Scrolling long content

Viewport: px

<div class="example">
  <div
    class="mc-modal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="modalTitle"
    aria-hidden="true"
  >
    <div class="mc-modal__dialog is-open" role="document">
      <header 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>
      </header>
      <main class="mc-modal__body">
        <article class="mc-modal__content">
          <h3 class="mc-modal__heading">Title</h3>
          <div class="mc-modal__inner mt-body-m">
            <p>
              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>
              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>
              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>
              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>
              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>
              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>
              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>
              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>
          </div>
        </article>
      </main>
      <footer class="mc-modal__footer">
        <button type="button" class="mc-button">
          <span class="mc-button__label">Button label</span>
        </button>
      </footer>
    </div>
  </div>
</div>

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 is-open" role="document">
      <header 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>
      </header>
      <main class="mc-modal__body">
        <article class="mc-modal__content">
          <h3 class="mc-modal__heading">Title</h3>
          <div class="mc-modal__inner mt-body-m">
            <p>Content paragraph</p>
          </div>
        </article>
      </main>
      <footer 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>
      </footer>
    </div>
  </div>
</div>

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 is-open" role="document">
      <header 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>
      </header>
      <main class="mc-modal__body">
        <article class="mc-modal__content">
          <h3 class="mc-modal__heading">Title</h3>
          <div class="mc-modal__inner mt-body-m">
            <p>Content paragraph</p>
          </div>
        </article>
      </main>
      <footer 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>
      </footer>
    </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:

Breakpoint	Modal width
S	100%
M	38,5mu (616px)
L	48mu (768px)
XL	50mu (800px)
XXL	56,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:

Breakpoint	Modal max-height
S	100% (16px margin-top and bottom)
M	1:2 screen
L	2:3 screen
XL	2:3 screen
XXL	1:2 screen

On opening

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

Added the is-open class on the mc-modal__dialog element.
A mc-modal-overlay element is generated in the DOM. This element must also have the class is-visible.

Viewport: px

<div class="example">
  <div
    class="mc-modal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="modalTitle"
    aria-hidden="true"
  >
    <div class="mc-modal__dialog is-open" role="document">
      <header class="mc-modal__header">
        <svg class="mc-modal__icon">
          <use xlink:href="#icon" />
        </svg>
        <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>
      </header>
      <main class="mc-modal__body">
        <article class="mc-modal__content">
          <h3 class="mc-modal__heading">Title</h3>
          <div class="mc-modal__inner mt-body-m">
            <p>Content paragraph</p>
          </div>
        </article>
      </main>
      <footer class="mc-modal__footer">
        <button type="button" class="mc-button">
          <span class="mc-button__label">Button label</span>
        </button>
      </footer>
    </div>
  </div>
  <div class="mc-overlay is-visible" tabindex="-1" role="dialog"></div>
</div>


<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <symbol id="icon" viewBox="0 0 24 24">
    <path
      d="M17.13 16.57H8a1 1 0 0 1-1-.74L4.39 6H3a1 1 0 0 1 0-2h2.15a1 1 0 0 1 1 .74l.53 2H20A1 1 0 0 1 20.94 8l-2.87 7.87a1 1 0 0 1-.94.7zm-8.34-2h7.64l2.14-5.87H7.2z"
    />
    <circle cx="9.46" cy="19.85" r="2.15" />
    <circle cx="15.69" cy="19.85" r="2.15" />
  </symbol>
</svg>

Prevent body from scrolling

When you use a modal, by definition, it opens on top of the content of your page.

But depending on your context of use, you may need to prevent the user from scrolling the page in the background of your modal.

That's why Mozaic provides you with a css utility class allowing you to lock the use of scroll.

To do this, you need to add the .mu-prevent-body-scroll class to both the html and body tags.

When using this utility class, do not forget to import the associated SCSS file:

@import 'utilities/_u.scroll';

Note that the use of this class is not imposed by Mozaic but left to your discretion.

Modals

Import

Usage

Detail of areas

The header

The body

The footer

Variations

Header with icon

Scrolling long content

Footer - two call to actions

Footer - call to action and link

Behaviour

Max-width

Max-height

On opening

Prevent body from scrolling