@import 'settings-tools/all-settings';
@import 'components/c.notification';

Basic usage

Wrap a title (it may be any level of heading: h1, h2, h3 and so on, depending on the context or SEO requirements), p and a a or button tags in a div and apply the mc-notification class:

<div class="mc-notification">
<div class="mc-notification__content">
<h3 class="mc-notification__title">Information notification</h3>
<p class="mc-notification__message">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa.
<div class="mc-notification__footer">
<a class="mc-link mc-link--m mc-link--s@from-l" href="#">Link</a>

You can add a link to your Notification component.

In order to keep the display of the component harmonious, please note that the link added to the Notification component must be a .mc-link in size M in mobile, but in size S in desktop (from the L breackpoint).

Note that any other use than a mc-link in size S, does not respect the Design System guidelines.

Use with buttons

You can also use the Notification component with one or two buttons.

In order to keep the component displaying harmonious, please note that the buttons added to the Notification component should be .mc-button in size M in mobile, but in size S in desktop (from the L breackpoint).


Depending on the context of use, you can use different types of notifications.

Mozaic provides you with 4 types of notifications, which you can use with the following css modifiers:

  • information (default): mc-notification--information
  • success: mc-notification--success
  • warning: mc-notification--warning
  • danger: mc-notification--danger

The modifier is to be applied on the element having the mc-notification class



Mozaic offers you two sizes of notifications that you can use, by applying the following modifiers on the mc-notification element :

  • Size S: use the mc-notification--s modifier
  • Size M: default size - no modifier needeed


Using mc-notification-closable class you have a closable notification: