Notification

figma:ready
react:ready
scss:ready
freemarker:ready
vue:ready
webComponent:ready
Usage
Code
Accessibility
Design
Specs

Import


@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.
</p>
<div class="mc-notification__footer">
<a class="mc-link mc-link--m mc-link--s@from-l" href="#">Link</a>
</div>
</div>
</div>

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

Types

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

Variations

Sizes

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

Closable

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