Components

Layers

sketch:Readyscss:Readyfigma:Ready
Usage
Code
Accessibility

Import

Import the settings, the layer, 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 layers.

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


@include import-font-families();


@import 'components/_c.layer';
@import 'components/_c.button';

Usage

A layer is composed of several zones:

  • A header with the class : mc-layer__header (mandatory)
  • A body with class: mc-layer__body (mandatory)
  • A footer with class: mc-layer__footer (optional)

These areas are then encompassed in:

  • A specific container with the class: mc-layer__dialog
  • A global wrapper with the class: mc-layer
<div
  class="mc-layer"
  role="dialog"
  aria-labelledby="layerTitle"
  aria-modal="true"
  aria-hidden="true"
  tabindex="-1"
>
  <div class="mc-layer__dialog" role="document">
    <div class="mc-layer__header">
      <h2 class="mc-layer__title" id="layerTitle">Layer Title</h2>
      <button class="mc-layer__close" type="button">
        <span class="mc-layer__close-text">Close</span>
      </button>
    </div>
    <div class="mc-layer__body">
      <div class="mc-layer__content">
        <!-- Here your content -->
      </div>
    </div>
    <div class="mc-layer__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>
Viewport: px 
<div class="example">
  <div
    class="mc-layer"
    role="dialog"
    aria-labelledby="layerTitle"
    aria-modal="true"
    aria-hidden="true"
    tabindex="-1"
  >
    <div class="mc-layer__dialog is-open" role="document">
      <div class="mc-layer__header">
        <h2 class="mc-layer__title" id="layerTitle">Layer Title</h2>
        <button class="mc-layer__close" type="button">
          <span class="mc-layer__close-text">Close</span>
        </button>
      </div>
      <div class="mc-layer__body">
        <div class="mc-layer__content">
          <!-- Your content here -->
        </div>
      </div>
      <div class="mc-layer__footer">
        <button type="button" class="mc-button">
          <span class="mc-button__label">Button label</span>
        </button>
      </div>
    </div>
  </div>
  <div class="mc-layer-overlay is-visible" tabindex="-1" role="dialog"></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 layer (.mc-layer__title)
  • as well as its close button (.mc-layer__close)
  • it's also possible to add an icon if needed (.mc-layer__icon)

These elements are mandatory and must always be present in your layer code. With the exception of the icon which is optional.

The body

The body can contain your custom content. It can be text, buttons, and so on.

The footer is the area that allows you to insert calls to action. This area is optional and is not always present depending on the context in which your layer is used.

If there is a footer in your layer, note that the call-to-actions buttons inside always take 100% of the layer width on the 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-layer"
    role="dialog"
    aria-labelledby="layerTitle"
    aria-modal="true"
    aria-hidden="true"
    tabindex="-1"
  >
    <div class="mc-layer__dialog is-open" role="document">
      <div class="mc-layer__header">
        <svg class="mc-layer__icon">
          <use xlink:href="#icon" />
        </svg>
        <h2 class="mc-layer__title" id="layerTitle">Layer Title</h2>
        <button class="mc-layer__close" type="button">
          <span class="mc-layer__close-text">Close</span>
        </button>
      </div>
      <div class="mc-layer__body">
        <div class="mc-layer__content">
          <!-- Your content here -->
        </div>
      </div>
      <div class="mc-layer__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 class="mc-layer-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)

Body with scrolling content

Depends on the context, the scrollbar can be next to the content or at the edge of the layer.

Warning

Add the mc-layer-open class to the html body element to prevent the default scrolling of the browser window.

Scrollbar on content

By default the scrollbar is next to the content.

  • Add mc-layer__body--overflowing modifier to the mc-layer__body element.
Viewport: px 
<div class="example">
  <div
    class="mc-layer"
    role="dialog"
    aria-labelledby="layerTitle"
    aria-modal="true"
    aria-hidden="true"
    tabindex="-1"
  >
    <div class="mc-layer__dialog is-open" role="document">
      <div class="mc-layer__header">
        <h2 class="mc-layer__title" id="layerTitle">Layer Title</h2>
        <button class="mc-layer__close" type="button">
          <span class="mc-layer__close-text">Close</span>
        </button>
      </div>
      <div class="mc-layer__body mc-layer__body--overflowing">
        <div class="mc-layer__content">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque
            odit, eligendi non, minus soluta dicta, excepturi harum tempora
            possimus dignissimos dolor rerum natus voluptatum quia. Architecto
            temporibus repellendus sed.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque
            odit, eligendi non, minus soluta dicta, excepturi harum tempora
            possimus dignissimos dolor rerum natus voluptatum quia. Architecto
            temporibus repellendus sed.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque
            odit, eligendi non, minus soluta dicta, excepturi harum tempora
            possimus dignissimos dolor rerum natus voluptatum quia. Architecto
            temporibus repellendus sed.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque
            odit, eligendi non, minus soluta dicta, excepturi harum tempora
            possimus dignissimos dolor rerum natus voluptatum quia. Architecto
            temporibus repellendus sed.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque
            odit, eligendi non, minus soluta dicta, excepturi harum tempora
            possimus dignissimos dolor rerum natus voluptatum quia. Architecto
            temporibus repellendus sed.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque
            odit, eligendi non, minus soluta dicta, excepturi harum tempora
            possimus dignissimos dolor rerum natus voluptatum quia. Architecto
            temporibus repellendus sed.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque
            odit, eligendi non, minus soluta dicta, excepturi harum tempora
            possimus dignissimos dolor rerum natus voluptatum quia. Architecto
            temporibus repellendus sed.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque
            odit, eligendi non, minus soluta dicta, excepturi harum tempora
            possimus dignissimos dolor rerum natus voluptatum quia. Architecto
            temporibus repellendus sed.
          </p>
        </div>
      </div>
      <div class="mc-layer__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 class="mc-layer-overlay is-visible" tabindex="-1" role="dialog"></div>
</div>

Scrollbar on layer

In some context, the scrollbar can be moved to the edge of the layer.

  • Add mc-layer__body--overflowing-scroll-edge modifier to the mc-layer__body element.
Viewport: px 
<div class="example">
  <div
    class="mc-layer"
    role="dialog"
    aria-labelledby="layerTitle"
    aria-modal="true"
    aria-hidden="true"
    tabindex="-1"
  >
    <div class="mc-layer__dialog is-open" role="document">
      <div class="mc-layer__header">
        <h2 class="mc-layer__title" id="layerTitle">Layer Title</h2>
        <button class="mc-layer__close" type="button">
          <span class="mc-layer__close-text">Close</span>
        </button>
      </div>
      <div class="mc-layer__body mc-layer__body--overflowing-scroll-edge">
        <div class="mc-layer__content">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque
            odit, eligendi non, minus soluta dicta, excepturi harum tempora
            possimus dignissimos dolor rerum natus voluptatum quia. Architecto
            temporibus repellendus sed.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque
            odit, eligendi non, minus soluta dicta, excepturi harum tempora
            possimus dignissimos dolor rerum natus voluptatum quia. Architecto
            temporibus repellendus sed.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque
            odit, eligendi non, minus soluta dicta, excepturi harum tempora
            possimus dignissimos dolor rerum natus voluptatum quia. Architecto
            temporibus repellendus sed.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque
            odit, eligendi non, minus soluta dicta, excepturi harum tempora
            possimus dignissimos dolor rerum natus voluptatum quia. Architecto
            temporibus repellendus sed.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque
            odit, eligendi non, minus soluta dicta, excepturi harum tempora
            possimus dignissimos dolor rerum natus voluptatum quia. Architecto
            temporibus repellendus sed.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque
            odit, eligendi non, minus soluta dicta, excepturi harum tempora
            possimus dignissimos dolor rerum natus voluptatum quia. Architecto
            temporibus repellendus sed.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque
            odit, eligendi non, minus soluta dicta, excepturi harum tempora
            possimus dignissimos dolor rerum natus voluptatum quia. Architecto
            temporibus repellendus sed.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque
            odit, eligendi non, minus soluta dicta, excepturi harum tempora
            possimus dignissimos dolor rerum natus voluptatum quia. Architecto
            temporibus repellendus sed.
          </p>
        </div>
      </div>
      <div class="mc-layer__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 class="mc-layer-overlay is-visible" tabindex="-1" role="dialog"></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-layer"
    role="dialog"
    aria-labelledby="layerTitle"
    aria-modal="true"
    aria-hidden="true"
    tabindex="-1"
  >
    <div class="mc-layer__dialog is-open" role="document">
      <div class="mc-layer__header">
        <h2 class="mc-layer__title" id="layerTitle">Layer Title</h2>
        <button class="mc-layer__close" type="button">
          <span class="mc-layer__close-text">Close</span>
        </button>
      </div>
      <div class="mc-layer__body">
        <div class="mc-layer__content">
          <!-- Your content here -->
        </div>
      </div>
      <div class="mc-layer__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 class="mc-layer-overlay is-visible" tabindex="-1" role="dialog"></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-layer"
    role="dialog"
    aria-labelledby="layerTitle"
    aria-modal="true"
    aria-hidden="true"
    tabindex="-1"
  >
    <div class="mc-layer__dialog is-open" role="document">
      <div class="mc-layer__header">
        <h2 class="mc-layer__title" id="layerTitle">Layer Title</h2>
        <button class="mc-layer__close" type="button">
          <span class="mc-layer__close-text">Close</span>
        </button>
      </div>
      <div class="mc-layer__body">
        <div class="mc-layer__content">
          <!-- Your content here -->
        </div>
      </div>
      <div class="mc-layer__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 class="mc-layer-overlay is-visible" tabindex="-1" role="dialog"></div>
</div>

As detailed above, the footer is optional. Depending on the context of your layer, you can do without it:

Viewport: px 
<div class="example">
  <div
    class="mc-layer"
    role="dialog"
    aria-labelledby="layerTitle"
    aria-modal="true"
    aria-hidden="true"
    tabindex="-1"
  >
    <div class="mc-layer__dialog is-open" role="document">
      <div class="mc-layer__header">
        <h2 class="mc-layer__title" id="layerTitle">Layer Title</h2>
        <button class="mc-layer__close" type="button">
          <span class="mc-layer__close-text">Close</span>
        </button>
      </div>
      <div class="mc-layer__body">
        <div class="mc-layer__content">
          <!-- Your content here -->
        </div>
      </div>
    </div>
  </div>
  <div class="mc-layer-overlay is-visible" tabindex="-1" role="dialog"></div>
</div>

Extended layer

In some configurations, you may need to extend the width of the layer.

To do this, you can add the mc-layer__dialog--extend to the .mc-layer__dialog.

Note that modifier extends the width of the layer only from the breakpoint M (680px)

Viewport: px 
<div class="example">
  <div
    class="mc-layer"
    role="dialog"
    aria-labelledby="layerTitle"
    aria-modal="true"
    aria-hidden="true"
    tabindex="-1"
  >
    <div class="mc-layer__dialog mc-layer__dialog--extend is-open" role="document">
      <div class="mc-layer__header">
        <h2 class="mc-layer__title" id="layerTitle">Layer Title</h2>
        <button class="mc-layer__close" type="button">
          <span class="mc-layer__close-text">Close</span>
        </button>
      </div>
      <div class="mc-layer__body">
        <div class="mc-layer__content">
          <!-- Your content here -->
        </div>
      </div>
      <div class="mc-layer__footer">
        <button type="button" class="mc-button">
          <span class="mc-button__label">Button label</span>
        </button>
      </div>
    </div>
  </div>
  <div class="mc-layer-overlay is-visible" tabindex="-1" role="dialog"></div>
</div>

Behaviour

On opening

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

  • Added the mc-layer-open class to the body to prevent the default scrolling of the browser window.
  • Added the is-open class on the mc-layer__dialog element.
  • An mc-layer-overlay element is generated in the DOM. This element must also have the class is-visible.