Layers

figma:ready
react:ready
scss:ready
freemarker:ready
vue: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';
@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>

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:

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.

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.

Footer - two call to actions

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

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.

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

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)

Open from left to right

In some configurations, you may want to open the layer from the left to the right.

To do this, you can add the mc-layer--ltr to the .mc-layer.

Behaviour

On opening

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

  • 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.

Prevent body from scrolling

When you use a layer, 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 layer.

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.